Создаем кнопку «Наверх» или Scroll to Top на jQuery

В этом уроке, мы узнаем, как создать свою Scroll to Top кнопку для длинных страниц. Способ реализации очень прост. Если вы его усвоите, вы сможете настроить кнопку Scroll to Top так, как вам захочется. Преимущество в том, что данная кнопка реализована на популярном фреймверке jQuery, который используется практически на каждом сайте.

Подготовка

 Для начала, нам понадобиться картинка кнопки наверх. Для этого можете скачать любую стрелочку или нарисовать сами. Сохраните ее под именем arrow.png. Как вы уже догадались, эта картинка и будет нашей кнопкой наверх.

CSS стили кнопки «Наверх»

В header страницы или в отдельном css файле, установим css стили для div блока с id=scroller.

<style>
#scroller{
    position: fixed;    
    /** позиция кнопки scroll to top **/
    bottom: 30px;   
    /** картинка кнопки наверх**/
    background: transparent url(arrow.png) no-repeat left top;  
    width: 32px;
    height: 32px;
    cursor: pointer;
    /** скрываем кнопку в начале **/
    display:none;
}
</style>

Как видите, прежде всего мы установили фиксированную позицию блока, вы можете поменять размещение кнопки scroll to top с помощью значения bottom. Далее мы устанавливаем фоном нашу стрелочку, которую подготовили на первом этапе. В конце, скрываем кнопку, чтобы ее не было видно, когда страница только загружена.

JavaScript код кнопки «Наверх»

Как и полагается, мы напишем код скрипта кнопки в секции header.

Для начала подключим библиотеку jQuery, для этого воспользуемся Google CDN. Хотя вы можете подключить из официального сайта jQuery, Microsoft или из своего сервера. Я использую Google CDN, по моему мнению, он работает наиболее быстро.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

Создаем JavaScript функцию после загрузки библиотеки jQuery.

<script>
$(document).ready(function(){   
    $(window).scroll(function () {
        if ($(this).scrollTop() > 0) {
            $('#scroller').fadeIn();
        } else {
            $('#scroller').fadeOut();
        }
    });

    $('#scroller').click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 400);
        return false;
    });
});
</script>

Разберемся в коде немного попозже... В начале мы вызываем функцию по загрузке страницы:

$(document).ready(function(){
});

В первой части функции, мы устанавливаем событие на scroll событие. Когда происходит скроллинг окна значение переменной scrollTop более 0, в это время мы выводим кнопку «Наверх», когда скроллинг не происходит, мы ее прячем.

Во второй части функции, мы цепляем обработчик события click на кнопку scroll to top (наверх), когда она нажата, мы анимируем скроллинг к тегу body. То есть происходит скроллинг в начало страницы.

На этом создание базового кода кнопки «Наверх» завершено!

Доработки Scroll To Top

Надеюсь, у вас есть тысячи идей, как сделать эту кнопку красивее и лучше. Все что вам предстоит сделать – это внести свои коррективы в этот скрипт. Для примера, можете добавить изменение стиля кнопки при наведении мыши.

В завершение

Буквально за 2 минуты, вы узнали, как создать собственную кнопку scroll to top или «наверх» на jquery. Надеюсь, этот урок был полезен и прост для понимания. Если это так вы можете поделиться им в социальных сетях, нажав на кнопочки ниже. Если остались вопросы по поводу scroll to top, жду их в комментариях ниже этого урока. Творческих вам успехов!

Демо Скачать исходники (0.01 Mb.)

Дальше: PHP календарь: скрипт календаря для сайта на PHP + HTML + CSS