Скроллинг страницы вверх

С появлением удобной (на мой взгляд, на ваш может быть и нет) пагинции страниц с помощью скролинга (Scroll+Ajax), на многих сайтах, стало неудобно подниматься вверх (обратно к меню сайта), так как внедряя технологию некоторые программисты забывают о том, что меню сайта находится в шапке, и нет возможности быстро до него «достучаться». А ведь каждый знает, что одно из главных требований пользователей это удобство.
Расскажу как реализовать кнопку, при нажатии на которую пользователь поднимется вверх.

Для реализации надо создать пару файлов: ButtonUpScroll.js (JavaScript который будет выводить кнопку и обрабатывать действия пользователя), ButtonUpScroll.css (Стиль кнопки), ButtonUpScroll.png (Рисунок самой кнопки).
Из других технологий web разработки нам понадобиться JQuery.

У меня кнопка имеет такой вид (40х40 пикселей):
ButtonUpScroll

Сам HTML кнопки:

   <div id="ButtonUpScroll" class="ButtonUpScroll" ishiden=0 style="display: none;"></div>

Код простой но есть пару особенностей:

ishiden — Параметр отвечает скрыта (0) или показана (1) кнопка
display: none — Вначале скрываем кнопку на странице

В файле ButtonUpScroll.css описываем стиль:

.ButtonUpScroll {
    width: 40px; // Ширина кнопки
    height: 40px; // Высота кнопки
    background-image: url("/images/ButtonUpScroll.png"); // Путь к вашему рисунку с кнопкой
    background-position: center center;
    background-repeat: no-repeat;
    position: fixed; // Фиксирум кнопку, что бы она прокручивалась вместе с текстом
    top: 3px; // Положение - отступим сверху
    left: 50%; // Положение - отступим слева
    cursor: pointer; // Меняем курсор при наведении
    z-index: 9999; // Что бы кнопка не перекрывалась другими элементами страницы
}

В файле ButtonUpScroll.js нам необходимо будет описать пару обработчиков на действие пользователя:

Пользователь прокрутил страницу на определенную величину — показываем кнопку
Пользователь нажал на кнопку — переносим его в начала страницы

Напишем функцию которая будет показывать кнопку, если пользователь опустился больше чем на 50 пикселей:

    $(window).scroll(function () {
        if ($(document).scrollTop()>50) {
            //Появление кнопки
            if ($('div[id="ButtonUpScroll"]').attr('ishiden')==0) {
                $('div[id="ButtonUpScroll"]').attr('ishiden',1);
                $('div[id="ButtonUpScroll"]').slideDown(500);
            }
        }else{
            //Скрваем кнопку
            $('div[id="ButtonUpScroll"]').attr('ishiden',0);
            $('div[id="ButtonUpScroll"]').slideUp(300);
        }
    });

Тут можно применять разную анимацию показа и скрытия кнопки (У меня появление/скрытие описано через slideDown/slideUp).

Обработка события при нажатии на кнопку:

    $('div[id="ButtonUpScroll"]').live('click',function(){
        var v=5000; //скорость прокрутки стрницы вверх пиксель/сек 
        var h=$(document).scrollTop()+screen.height; 
        var t=h/v*1000;  // Время за которое должна страница подняться вверх

        $('body,html').animate({
            scrollTop: 0
        }, t);
        return false;
    });

В итоге получился файл ButtonUpScroll.js:

ButtonUpScroll.js

$(document).ready(function(){

    $(window).scroll(function () {
        if ($(document).scrollTop()>50) {
            if ($('div[id="ButtonUpScroll"]').attr('ishiden')==0) {
                $('div[id="ButtonUpScroll"]').attr('ishiden',1);
                $('div[id="ButtonUpScroll"]').slideDown(500);
            }
        }else{
            $('div[id="ButtonUpScroll"]').attr('ishiden',0);
            $('div[id="ButtonUpScroll"]').slideUp(300);
        }
    });

    $('div[id="ButtonUpScroll"]').live('click',function(){
        var v=5000; 
        var h=$(document).scrollTop()+screen.height;
        var t=h/v*1000;

        $('body,html').animate({
            scrollTop: 0
        }, t);
        return false;
    });

});

Осталось только подключить файлы к страничке:

<head>
<script src="/js/ButtonUpScroll.js" language="javascript" type="text/javascript">
<link href="/css/ButtonUpScroll.css" type="text/css" rel="stylesheet">
</head>

Вот и все, приятного «аппетита». Спасибо за внимание.

Автор: nbutikov

Источник ^[1]

Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/23795

Ссылки в тексте:

[1] Источник: http://habrahabr.ru/post/164343/

Нажмите здесь для печати.