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

Простая реализация на 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;
}

JS

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

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

Ниже приведен jаvascript код, который можно вставить в любое место на странице. На начальном этапе он осуществляет скрытие элемента #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 такого не нужно, но если у пользователя не поддерживается jаvascript, то это своеобразный резерв - прокрутка произойдет и в этом случае, но только без анимации.