Анимированная прокрутка вверх

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

Разметка HTML

Объявим элемент #back-top с position:fixed, он будет зафиксирован на странице. SPAN тег необязателен. Но мы добавили span тег для отображения стрелки графически (ввиде картинки). Также был добавлен переход в 1 секунду, чтобы создать эффект затухания при наведении мыши.

    <p id="back-top">
        <a href="#top"><span></span>Вверх</a>
    </p>

CSS

#back-top {
    position: fixed;
    bottom: 30px;
    margin-left: -150px;
}

#back-top a {
    width: 108px;
    display: block;
    text-align: center;
    font: 11px/100% Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    color: #bbb;

    /* переход */
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
#back-top a:hover {
    color: #000;
}

/* иконка стрелки (тег span) */
#back-top span {
    width: 108px;
    height: 108px;
    display: block;
    margin-bottom: 7px;
    background: #ddd url(up-arrow.png) no-repeat center center;

    /* круглые углы */
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;

    /* переход */
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
#back-top a:hover span {
    background-color: #777;
}

javascript

Подключаем сначала jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Ниже приведен javascript код, который можно вставить в любое место на странице. На начальном этапе он осуществляет скрытие элемента #back-top (в демо это тег <p id="back-top">). Далее скрипт сравнивает положение скроллбара окна (scrollTop) со значением 100, если больше 100, то кнопка исчезает, иначе появляется. Далее функция по клику, если сделан клик по ссылке #back-top, то произойдет анимированная прокрутка body scrollTop вверх к 0.

<script>
$(document).ready(function(){

    // hide #back-top first
    $("#back-top").hide();
   
    // fade in #back-top
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });

        // scroll body to 0px on click
        $('#back-top a').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });

});
</script>

Обратите внимание, что кнопка Вверх имеет ссылку с якорем #top, которая является ID тега body. В принципе для jQuery такого не нужно, но если у пользователя не поддерживается javascript, то это своеобразный резерв - прокрутка произойдет и в этом случае, но только без анимации.

СКАЧАТЬСкачек: 2149
2,18 Kb
Кто скачал?

ДЕМОПосмотреть
пример