Войти Регистрация

Создаем кнопку «Наверх» или 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


Дискуссия по теме     7 Комментариев
Добавить комментарий
Alena 11.03.2017 ? 16:41
Здравствуйте! Подскажите, а как сделать такую кнопку, только наоборот вниз? И чтоб она появлялась, когда появляется прокрутка?
Комментарий ожидает проверки администратора
uhogorlonos 06.10.2014 в 13:07
ну и чтобы совсем уж навести красоту, в стили я вот такое вот себе насочинял: #scroller{ position: fixed; /** позиция кнопки scroll to top **/ right:30px; bottom: 30px; /** картинка кнопки наверх**/ background: #c9c9c9 url(/slider/img/arrow.png) no-repeat left top; width: 32px; height: 32px; cursor: pointer; /** скругляем углы серого фона **/ border-radius: 6px; /** скрываем кнопку в начале **/ display:none; /** добавляем красоты- прозрачность и плавное проявление при наведении **/ opacity: 0.3; -webkit-transition:all .2s ease-in-out; transition:all .2s ease-in-out } #scroller:hover { /** при наведении мыши делаем все ярче и отбрасываем тень **/ opacity: 0.5; box-shadow: 1px 1px 5px rgba(0,0,0,0.5); }
uhogorlonos 06.10.2014 в 13:04
Спасибо за отличное решение, заметил в описании одну неточность- в код страницы помимо скриптов надо добавить в самый низ блок <div id="scroller" title="в начало">
Leon 17.09.2014 в 20:52
Для красоты можно добавить #scroller:hover{opacity: 0.8}
Юлия 14.06.2014 в 19:55
Помогите, пожалуйста. На сайте Вита - медицинский центр есть Считалка калорий. Всё было хорошо, но не знаю откуда вместо кнопки Рассчитать появилась надпись Distance from top:350 Scroll position: 300, и, соответственно, калории не считаются. Что случилось? Как устранить данную проблему? Возможно я что-то нажала, но точно сказать не могу.Надеюсь на помощь, заранее спасибо.
Roll 07.05.2014 в 00:13
Отличное решение! Браво!!!
Scroll 25.12.2013 в 02:35
Отличный и простой вариант! замучался искать, в основном всякие псевдо "web мастера" публикуют один и тот-же пост про кнопку вверх для всяких вордпрессов - задолбали. Искал по запросу "jquery кнопка наверх -wordpress" и нашел, спасибо!
Добавить комментарий
Просмотров: 33947