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

Автор: Александр Головко Дата публикации: 15.07.2011

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

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

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

Проверено в:

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

Задача

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

Решение

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

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

Что качать?

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

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

<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()

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

Название параметра Описание
axis Ось, которая будет прокручиваться, 'x', 'y', 'xy' или 'yx'. 'xy' — значение по умолчанию
duration Длительность анимации.
easing Название уравнения easing.
margin Если true, целевые границы и margin вычитаются.
offset Чилсо или хэш {left: x, top:y }. Это значение будет добавлено к окончательной позиции (может быть отрицательным)
over Добавить часть высоты/ ширины элемента (также может быть отрицательным).
queue Если true, и обе оси прокручиваться, то сначала анимируется прокрутка на одной оси, а затем на другой. Порядок задает паравитр axis ('xy' или 'yx')
onAfterFirst Если queue=true, функция выполнится после прокрутки первой оси.
onAfter Функция, которая вызывается после того, как закончится вся анимация.

Подробнее про вызов 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>

Материал

По теме