При работе с веб-формами очень часто встает задача прокрутки страницы к тому или иному элементу. Например, при валидации форм, нужно показать пользователю, какое же из полей оказалось ошибочным.
Приведу типовой пример прокрутки к нужному элементу.
$(document).ready(function(){ $('.go_to').click( function(){ // ловим клик по ссылке с классом go_to var scroll_el = $(this).attr('href'); // возьмем содержимое атрибута href, должен быть селектором, т.е. например начинаться с # или . if ($(scroll_el).length != 0) { // проверим существование элемента чтобы избежать ошибки $('html, body').animate({ scrollTop: $(scroll_el).offset().top }, 500); // анимируем скроолинг к элементу scroll_el } return false; // выключаем стандартное действие }); });
Теперь, по нажатию на ссылку:
<a class="go_to" href="#elm">Туда</a> или <a class="go_to" href=".elm">Сюда</a>
страница плавно проскроллится к элементу с id=»elm» или class=»elm» соответственно.
Изменив селектор объекта, к которому прокручиваемся - получим прокрутку к нужному элементу на странице.