Плавная вертикальная прокрутка страницы сайта на jQuery

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Хочу отметить, что по мере выхода материала по скроллингу - это очередная инструкция по созданию эффекта вертикальной прокрутки страницы. Общая картина очень проста: обычная кнопка или стрелка (вверх), при нажатии на которую происходит прокрутка страницы к самому верху. Реализация эффекта на вашем сайте не представляет особой сложности. С такого типа задачей справится любой начинающий web-мастер. Добро пожаловать к изучению материала.

Для этого необходимо выполнить несколько самых простых действий. Начнем с просмотра демонстрационного примера и скачивания исходного материала.

Установка скрипта

1. После скачивания распакуйте архив в текущую папку на компьютере. В папке strelkanaverch1  Вы увидите две папки: css и img, а так же файл demo.html. Откройте последний в вашем браузере и убедитесь в работе скрипта.

2. В папке img находятся три вида изображения стрелок:

Можно выбрать понравившееся изображение и загрузить его в папку img с картинками вашего сайта. Пропишите название файла изображения в style.css в строку:

background: transparent url(../img/arrow.png) no-repeat left top;  

3. Подключаем стили. Скопируйте код из файла style.css и вставьте в файл стилей своего сайта. Этот же код можно взять здесь:

#scroller{
    position: fixed;  
    bottom: 30px;
    right: 30px;	
    background: transparent url(../img/arrow.png) no-repeat left top;  
    width: 50px;
    height: 50px;
    cursor: pointer;
    display: none;
}

#scroller:hover{
opacity: 0.5;
}

       Позиционирование стрелки (кнопки). В данном случае она располагается в 30 пикселах от низа страницы и на таком же расстоянии от правого края.

       Путь к файлу изображению стрелки. Обратите внимание на корректность прописания пути. В данном случае изображение берется с ближайшей родительской папки с изображениями (../img). Если изображение стрелки будет находиться в корневой папке сайта, то адрес будет начинаться только слэшем (/).

       Ширина и высота изображения стрелки (кнопки). Они должны соответствовать параметрам изображения в папке img.

       Значение уровня прозрачности элемента (стрелки). Можно выставить по усмотрению.

4. Подключаем библиотеку jQuery. В демо-примере показано подключение последней версии с сайта Google API. Этот код нужно вставлять в раздел head вашей страницы:

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

5. Далее подключаем скрипт вызова функции. Лучше вставить его в раздел footer перед закрывающим тегом body, чтобы не замедлять загрузку страницы. Код скрипта можно взять из демо или здесь:

<script type="text/javascript">
$(document).ready(function(){   
    $(window).scroll(function () {
        if ($(this).scrollTop() > 0) {
            $('#scroller').fadeIn();
        } else {
            $('#scroller').fadeOut();
        }
    });
    $('#scroller').click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 400);
        return false;
    });
});
</script>

6. И, наконец, после кода скрипта вставляем небольшой код блока, где будет находиться наша стрелка:

<div id="scroller" title="в начало">

После выполнения всех несложных операций всё будет замечательно функционировать.

Тема исчерпана. Спасибо за внимание. Всего Вам доброго. До встречи! С уважением, Л.М.