Кнопка "Наверх" или Scroll To Top своими руками

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

Посмотреть живое демо можно здесь.

Для создания такой кнопки нужно подредактировать файлы HTML, CSS и JavaScript вашего сайта.

HTML

Добавьте ссылку куда-нибудь в нижнюю часть HTML кода страницы сайта, например, в футер перед закрывающем тегом </body>. У ссылки должен быть уникальный идентификатор, заголовок всплывающей подсказки, а в качестве текста ссылки будем использовать специальный символ стрелки (➤), таким образом не нужно будет для отображения стрелки использовать изображение:

<a id="back2Top" title="Наверх" href="#">&#10148;</a>

CSS

В файле стилей CSS зададим размер, цвета, позицию и эффект при наведении нашей стрелки. Использованный нами HTML символ стрелки изначально направлен вправо и при помощи кода CSS мы развернем его против часовой стрелки, чтобы направить его вверх:

#back2Top {
    width: 40px;
    line-height: 40px;
    overflow: hidden;
    z-index: 999;
    display: none;
    cursor: pointer;
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
    position: fixed;
    bottom: 50px;
    right: 0;
    background-color: #DDD;
    color: #555;
    text-align: center;
    font-size: 30px;
    text-decoration: none;
}
#back2Top:hover {
    background-color: #DDF;
    color: #000;
}

JavaScript

Теперь добавим на страницу код JavaScript. При этом следует убедиться, что подключена библиотека jQuery.

Скрипт проверяет высоту прокрутки страницы, и когда она достигнет 100px, выводит наш виджет. Кроме этого еще один обработчик события ожидает нажатия на кнопку, и когда это происходит плавно перематывает к началу страницы:

/* Прокручивает страницу вверх при нажатии на кнопку */
$(window).scroll(function() {
    var height = $(window).scrollTop();
    if (height > 100) {
        $('#back2Top').fadeIn();
    } else {
        $('#back2Top').fadeOut();
    }
});
$(document).ready(function() {
    $("#back2Top").click(function(event) {
        event.preventDefault();
        $("html, body").animate({ scrollTop: 0 }, "slow");
        return false;
    });

});