Как сделать кнопку наверх на сайте

DEMO

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

Предварительно создадим страницу с "рыбным" текстом, что бы было что прокручивать и подключим наш любимый фреймвёрк jquery. Теперь создадим нашу кнопку. Для примера возьму демо-страницу из своей заметки Html навигация по странице. Кнопка вверх для сайта задаётся дивом с классом .gototop.

  <div> class="gototop">&#8679;</div>

.gototop{
    width: 50px;
    height: 50px;
    background-color: #00b3ee;
    position: fixed;/*фиксир. позиц*/
    bottom: 30px;
    left: 5%;
    font-size: 50px;
    text-align: center;
    line-height: 50px;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
    opacity: 0.5;/*полупрозрачная*/
    display: none;/*скрываем, а показываем Jquery*/  
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow:
    1px 6px 5px rgba(000,000,000,0.5);
    -webkit-box-shadow:
    1px 6px 5px rgba(000,000,000,0.5);
    box-shadow: 
    1px 4px 5px rgba(000,000,000,0.5);
    cursor: pointer;
}
.gototop:hover{
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    opacity: 1;/*при наведении не прозрачная*/
}

С html и css кодом всё я думаю понятно. Решил наваять не просто кнопку, а сделать так, что бы была и стрелка вверх для сайта. Стрелку на кнопке мы отобразили с помощью символа юникода. Саму кнопку мы спозиционировали фиксировано и с помощью css display: none скрыли её. За появление кнопки будет отвечать скрипт jquery, который мы опишем позже. Конечно кнопку мы могли скрыть и с помощью javascript, но если js будет отключён на компьютере пользователя, то кнопка будет видна постоянно и не будет работать. Так что лучше использовать css для скрытия. Теперь давайте посмотрим наш javascript код.

$(document).ready(function(){
    $(window).scroll(function () {
/*если прокрутка больше 300 показ. кнопку*/
        if ($(this).scrollTop() > 300) {
            $('.gototop, .alert').fadeIn();
/*если нет то скрываем кнопку*/
        } else {
            $('.gototop, .alert').fadeOut();
        }
    });
/*при клике по кнопке переходим вверх стр.*/
    $('.gototop').click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 700);
        return false;
    });
});               

Вот таким вот нехитрым способом мы решили ещё один вопрос юзабилити.