jQuery.ScrollTo. Программная перемотка скролла

Ты, конечно, встречал на страницах с большим количеством текста в самом низу ссылку «наверх». Или взять, допустим, содержание (при условии, что весь документ находится на одной длиннющей странице). Смысл примерно одинаков. Нажимаем на ссылку и попадаем в какое-то конкретное место документа. Фактически, программным образом перематываем скролл.

Реализовать такое с помощью якоря — пара пустяков. А что если я хочу не мгновенно попасть в нужную точку, а именно «перемотать» скролл?

Смотрим Демо-пример.

Проверено в:

• IE 6-8
• Firefox 4
• Opera 10
• Safari 4
• Chrome

Задача

Реализовать программную перемотку скролла.

Решение

Будем использовать специально для этого разработанный плагин jQuery.ScrollTo. Он умеет очень многое. Например, может перематывать как главный скролл окна, так и скролл какого-нибудь div. Может перематывать в определенную позицию (в пикселях или процентах) или к какому нибудь конкретному элементу (заданному, например, по id). Все это уже создано, наша задача научится этим пользоваться.

Официальный демо-пример.

Что качать?

• библиотеку jquery качаем или подключаем из хранилища.
• jquery.scrollTo-min.js (2.26 Kb) собственно плагин.

Быстрый старт

Подключаем библиотеки:

<script type="text/javascript" src="js/jquery-1.6.2.min.js" ></script>
<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>

Прописываем в HTML кому-нибудь id — будем перематывать окно до этого элемента:

<h2 id="target-el">
	Важный заголовок
</h2>

Задаем кнопку управления:

<button>Перемотать на важный заголовок</button>

При клике по кнопке включаем перемотку:

<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery('button').click(function() {
		jQuery.scrollTo('#target-el');
	});
});
</script>

А теперь подробнее

Команда jQuery.scrollTo() будет перематывать главный скрорлл. Если нужно перемотать скролл какого-нибудь элемента, используем запись вида jQuery(‘селектор’).scrollTo(), например:

jQuery('div.pane').scrollTo('#target-el');

Прараметры scrollTo()

Ну и как обычно, вся магия — в парметрах:

Подробнее про вызов scrollTo()

При вызове scrollTo() передается три вида параметров — цель, продолжительность, настройки (порядок имеет значение).

• цель — куда именно перематывать (подробнее см. ниже);
• продолжительность — параметр duration из таблички выше;
• настройки — остальные параметры из таблички выше.

В качестве цели можно использовать:

• Просто число
• Строку (’44’, ‘100px’, ‘+=30px’, и т.д.)
• Элемент DOM (дочерний для прокручиваемого элемента)
• Селектор
• Строка ‘max’ для прокрутки в конец
• Строка, определяющая процент, чтобы перейти к части контейнера (например: 50% переходит в середину)
• Хеш { top:x, left:y }, x и y может быть любое число/строка из описанных выше.

Примеры вызова с параметрами:

jQuery('div').scrollTo('#target-el', 1000, {margin:true});

jQuery('div').scrollTo('520px', 800);

jQuery('div').scrollTo('#target-el', 1000, {axis:'x'});

jQuery('div').scrollTo({top:'-=100px', left:'+=100'}, 800);

jQuery('div').scrollTo( '#target-el', 1600, {queue:true, onAfterFirst:function(){ } } );

Пример перемотки к элементу, заданному атрибутом

Конечно, прописывать в скрипте, например, id конкретного элемента не очень удобно. Лучше будет сделать более универсальное решение. Например, задать цель перемотки, как какой-либо атрибут у кнопки управления. Допустим, так:

<button value="target-id">Перемотать на важный заголовок</button>

<script type="text/javascript">
jQuery('button').click(function() {
	str = jQuery(this).val();
	jQuery.scrollTo("#"+str);
});
</script>

Материал

• jQuery.ScrollTo

По теме

• JScrollPane. Делаем красивый скроллинг
• JScrollPane 2 — настраиваемый скроллбар