Прокрутка страницы
Прокрутить страницу на нужную позицию можно через метод animate()
.
var pos = 100; // прокрутить страницу вниз на 100 пикселей $('body,html').animate({scrollTop: pos}, 500);
Для Firefox и IE надо выбирать $('html')
, а для Chrome и Opera $('body')
.
После того как страница будет прокручена на указанную позицию, можно выполнить код через третий атрибут.
var pos = 100; $('body,html').animate({scrollTop: pos}, 500, function(){ // код, после прокрутки страницы на указанную позицию });
Прокрутка в начало страницы
Чтобы прокрутить страницу в самое начало, достаточно вызвать пример выше и указать значение 0
.
$('body,html').animate({scrollTop: 0}, 500);
Через данный способ можно реализовать кнопку «вверх».
Выполнить код после прокрутки всей страницы
На примере ниже при каждой прокрутке сравнивается высота всей страницы и позиция на текущей странице, и когда высота и позиция совпадают (т.е. страница прокручена до конца), то выполняется код.
$(window).scroll(function() { if ($(window).scrollTop() == $(document).height() - $(window).height()) { alert("страница прокручена"); } });
Событие scroll()
выполняется при прокрутке странице.
Прокрутить страницу до указанного объекта
Сначала надо узнать позицию элемента через метод offset()
, и передать данную позицию в метод animate()
.
// позиция элемента на странице var elementPosition = $("#element").offset().top; // прокрутка до элемента $('body,html').animate({scrollTop: elementPosition}, 500);
Прокрутить в конец страницы
Прокрутить страницу вниз можно через следующий код:
$('html, body').animate({scrollTop: $(document).height() - $(window).height()}, 600);
Авторизуйтесь, чтобы добавлять комментарии