Scroll to top

Опубликовано: 04-05-2012 13:23

Многим приходилось видеть интересную и удобную штуку на сайте Вконтакте, когда, прокрутив страницу вниз, появлялась кнопка для возврата наверх. Впрочем, данная возможность теперь есть и на моем блоге - можете попробовать. Ниже я хочу рассказать Вам как можно реализовать такой функционал у себя на сайте с применением JQuery.

Основная идея сводиться к тому, что в JS происходит проверка на сдвиг содержимого окна и, если, оно превышает установленный порог, то появляется кнопка для возврата наверх текущей страницы. Что же нам надо для реализации этого функционала? Само собой, необходимо подключить JQuery. Сделать это можно, например, отсюда: https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js.

Далее, подготовим картинку самой кнопки (можно обойтись и без нее, использовав просто текстовую ссылку) и добавим в страницу ее отображение:


Теперь добавим стили для данного блока (отступы даны для примера, в каждом конкретном случае они будут разные):

#scroll-top {
    display:none;
    position: fixed;
    bottom: 8px;
    opacity: 0.7;
    margin-left: 974px;
}

Здесь мы устанавливаем абсолютные координаты для нашего блока с кнопкой, дабы исключить его пролистывание вместе с содержимым страницы.

А теперь напишем JS-составляющую, которая и будет реализовывать функционал возврата страницы наверх:

$(document).ready(function() {
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 350) {
                $('#scroll-top').fadeIn();
            } else {
                $('#scroll-top').fadeOut();
            }
        });
        $('#scroll-top a').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 500);
            return false;
        });
    });
});

Что же тут происходит? Первым делом мы вешаем на событие сдвига содержимого окна проверку. Если отступ сверху превышает (в данном случае) 350 точек, то отображаем div-блок с кнопкой-ссылкой. На событие-клик по этой кнопке ставим обработчик, который плавно изменяет отступ сверху до нуля. Вуаля! Этого в общем достаточно. Хотя, лучше добавить в тэг идентификатор #top. Это позволит работать функционалу и при отключенном JS. Только не забудьте в стилях убрать display:none