Прокрутка может быть интересной
Плагин для прокрутки содержания
-
Навигация слева
Навигация по умолчанию, показывает где вы находитесь на странице.
-
Навигация сверху
Фиксированная панель навигации.
-
Навигация справа
Панель можно разместить и справа на странице.
Данный плагин работает с jQuery v1.3+. Загрузите последнюю версию jQuery.
Как работает?
Page Scroller - мощная система навигации по странице, построенная на JavaScript с использованием библиотеки jQuery. Плагин можно исопльзовать на любом сайте.
- Определяем контейнер. $(’#wrapper’).pageScroller()
- Все секции в контейнере #wrapper будут подсчитаны.
- Добавляется система навигации для быстрого перехода к нужной секции.

Что включено?
Улучшите вашу страницу с помощью плагина
-
Навгиация слева и справа
Доступны темный и светлый варианты.
-
Навигация сверху
Используйте модульную сетку 960. Также доступны темный и светлый варианты оформления.
-
Стрелки "дальше" и "назад"
улучшите страницы блога удобным инструментом перемещения.
Документация
-
Типовое использование
Чтобы задействовать плагин подключите следующие файлы к странице в теге head:
- jQuery v1.3+
- Плагин Page Scroller
- CSS файл плагина Page Scroller
<script type="text/javascript" src="js/pagescroller.js"></script>
Запуск плагина
Запустите плагин при загрузке DOM:
$(document).ready(function(){ $('#main').pageScroller(); });
Переименуйте ссылки навигации
Можно использовать другие названия для ссылок навигации, передавая их в массиве:
var navLabels = new Array('Главная', 'Портфолио', 'Услуги', 'Контакт'); $('#main').pageScroller({ navigation: navLabels });
-
Структура кода HTML
секции должны иметь общий класс. По умолчанию все секции, которые включаются в навгиацию, должны иметь класс "section". Любой блочный элемент можно использовать в качестве секции или основного контейнера. Также поддерживаются элементы HTML5. Плагин будет устанавливать корректное позиционирование CSS для анимации jQuery:
<div id="main"> <div class="section"></div> <div class="section"></div> <div class="section"></div> <div class="section"></div> <div class="section"></div> </div>
Как изменить имя класса секции
Чтобы использовать другой класс, просто передайте его имя плагину при инициализации:
$('#main').pageScroller({ sectionClass: 'className' });
-
Доступные опции:
Свойство По умолчанию Описание animationSpeed 500 скорость перехода между секциями (миллисекунды) scrollOffset 20 смещение сверху для плавного прокручивания точки назначения (px) sectionClass 'section имя класса для секций плагина Page Scroller navigationClass 'scrollNav' имя класса для навигационного меню navigation array список имен ссылок навигации, используется массив animationBefore возвратная функция, выполняющаяся перед анимацией прокруткиы animationComplete возвратная функция, выполянющаяся после завершения анимации прокрутки onChange возвратная функция, выполняющаяся при обновлении навигации Пример:
$('#main').pageScroller({ animationSpeed: 1000, scrollOffset: 0, sectionClass: 'page-sections', animationBefore: function(){ //Код функции } });
API:
Функция Описание next() переключение на следующую секцию prev() переключение на предыдущую секцию goTo() переключение на определенную секцию, номер слайда (integer) Пример:
$('.button').click(function(){ pageScroller.goTo(4); });