Плавная кнопка "Наверх" на jQuery

Многие из Вас видели, что на некоторых сайтах при прокрутке окна браузера, в какой-то момент появляется кнопка "Наверх". Если по ней кликнуть, то начинается плавная перемотка полосы прокрутки до самого верха. Как реализовать плавную кнопку "Наверх" через jQuery, Вы и узнаете из этой статьи.

HTML

Для начала создадим в html нашу кнопку.

<div id="button-up">
    <span>Наверх</span>
</div>

CSS

Добавим стили к нашей кнопки

#button-up {
    display:none;
    left: 0;
    margin: 0;
    position: fixed;
    bottom: 50px;
    outline:none;
    width: 52px;
    color: #333333;
    line-height: 30px;
    text-decoration: none;
    padding: 0px 0 0 28px;
    background: url(../images/icon-arrow-black-up.jpg) no-repeat 7px 11px #ffffff;
    
    border-radius: 0 4px 4px 0;
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    -o-border-radius: 0 4px 4px 0;
    
    box-shadow: 0 2px 4px #999;
    -webkit-box-shadow: 0 2px 4px #999;
    -moz-box-shadow: 0 2px 4px #999;
    -o-box-shadow: 0 2px 4px #999;
    cursor:pointer;
}

Javascript и jQuery

Далее создадим функцию которая будет при скролинге страницы показывать или скрывать нашу кнопку. Также сделаем чтобы кнопка не сразу появлялась, а при отступе сверху 50px. Если расстояние до верха меньше 50 px то будем скрывать кнопку. Для того чтобы при нажатии на кнопку, прокрутка в начало страницы была плавной мы добавили функцию animate.

$(document).ready(function(){
    /**
     * При прокрутке страницы, показываем или срываем кнопку
     */
    $(window).scroll(function () {
        // Если отступ сверху больше 50px то показываем кнопку "Наверх"
        if ($(this).scrollTop() > 50) {
            $('#button-up').fadeIn();
        } else {
            $('#button-up').fadeOut();
        }
    });
    
    /** При нажатии на кнопку мы перемещаемся к началу страницы */
    $('#button-up').click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
    
});

Вот и все, кнопка готова к использованию. Также вначале не забудьте подключить фреймворк jQuery.

Скачать рабочий пример