Автоматическая прокрутка страницы вниз нужна в том случае, когда на странице или в каком-то отдельном блоке страницы организован чат сообщений или постоянный вывод какого-то текста — тогда вы сможете все время поддерживать свежие сообщения перед глазами новых пользователей. Те, кому будет интересно почитать, что было раньше, смогут переместить ползунок скролла и почитать историю.
Автоматическая прокрутка страницы вниз может быть реализована разными инструментами. Практически каждый фреймворк на основе JavaScript содержит встроенные инструменты для реализации задуманного. Сегодня мы рассмотрим, как делается автоматическая прокрутка с помощью jQuery. Напомним, что jQuery — это библиотека на основе JavaScript. Главная идея jQuery — писать меньше, но делать больше. jQuery очень популярна среди веб-разработчиков, несмотря на то, что в современном вебе достаточно других инструментов для разработки.
Автоматическая прокрутка страницы вниз на jQuery
Автоматическая прокрутка страницы на основе jQuery реализуется несложно, например:
setInterval(function() {
window.scrollTo(0, document.body.scrollHeight);
}, 1100);
Такая прокрутка будет достаточно резкой, поэтому ее можно реализовать немного по-другому, используя функцию «animate()»:
setInterval(function(){
$('html,body').animate({scrollTop: $('html,body').get(0).scrollHeight}, 1100);
}, 1100);
Описанный выше код можно поместить на всю страницу, если на этой странице вы постоянно вводите новостной контент. Также можно применить данный код в отдельном блоке, если в этом блоке реализован чат для общения. Такие чаты обычно помещают в боковой панели сайта. Проблема этого метода заключается в том, что сложно просмотреть историю сообщений, потому что ползунок прокрутки всегда будет автоматически опускаться вниз при появлении новых сообщений.
Автоматическая прокрутка всей страницы
Чтобы реализовать прокрутку контента всей страницы, нужно использовать такой код:
var timer;
var isPaused = false;
$(window).on('wheel', function(){
isPaused = true;
clearTimeout(timer);
timer = window.setTimeout(function(){
isPaused = false;
}, 1100);
});
window.setInterval(function(){
if(!isPaused){
window.scrollTo(0, document.body.scrollHeight);
}
}, 600);
Автоматическая прокрутка в отдельном компоненте сайта
Чтобы организовать автоматическую прокрутку в отдельном компоненте сайта, нужно применить такой код:
var timer;
var isPaused = false;
$(window).on('wheel', function(){
isPaused = true;
clearTimeout(timer);
timer = window.setTimeout(function(){
isPaused = false;
}, 1100);
});
window.setInterval(function(){
if(!isPaused){
$("#идентификатор блока").scrollTop($("#идентификатор блока")[0].scrollHeight);
}
}, 600);
jQuery: прокрутка до элемента
Автоматическая прокрутка страницы вниз иногда может быть реализована до одного конкретного элемента. То есть вам не нужно постоянно поддерживать фокус пользователя на последних сообщениях страницы или чата, а нужно один раз переместить фокус пользователя к конкретному блоку. По такому принципу работает якорное меню.
Прокрутка до элемента на jQuery возможна, при условии что такой элемент будет, поэтому создаем HTML-элемент и задаем ему идентификатор:
<div id="myElement">Контент блока</div>
После этого необходимо создать кнопку/пункт в меню, при нажатии на которую пользователя будет перебрасывать к нужному элементу. Делается это так:
<a href="#myElement">Нажми меня</a>
Затем можно добавлять скрипт jQuery для прокрутки до элемента:
$(document).ready(function () {
$("a").click(function () {
var elementClick = $(this).attr("href");
var destination = $(elementClick).offset().top;
if ($.browser.safari) {
$('body').animate({ scrollTop: destination }, 1200); //1200 — скорость прокрутки
} else {
$('html').animate({ scrollTop: destination }, 1200);
}
return false;
});
});
Заключение
Автоматическая прокрутка страницы вниз на jQuery — несложная задача. Главное — определить цель прокрутки:
нужна автоматическая прокрутка до последних сообщений;
нужна прокрутка до конкретного элемента.
Реализация во всех случаях похожая, но со своими особенностями.
Другое
