Прокрутка может быть интересной

Плагин для прокрутки содержания

  • Навигация слева

    Навигация по умолчанию, показывает где вы находитесь на странице.

  • "Дальше" и "назад"

    Эти указатели могут быть полезны.

  • Навигация сверху

    Фиксированная панель навигации.

  • Навигация справа

    Панель можно разместить и справа на странице.

Данный плагин работает с jQuery v1.3+. Загрузите последнюю версию jQuery.

Как работает?

Page Scroller - мощная система навигации по странице, построенная на JavaScript с использованием библиотеки jQuery. Плагин можно исопльзовать на любом сайте.

  • Определяем контейнер. $(’#wrapper’).pageScroller()
  • Все секции в контейнере #wrapper будут подсчитаны.
  • Добавляется система навигации для быстрого перехода к нужной секции.
Как работает?

Что включено?

Улучшите вашу страницу с помощью плагина

  • Left & Right Anchor Links

    Навгиация слева и справа

    Доступны темный и светлый варианты.

  • Top Auto Updating Bar

    Навигация сверху

    Используйте модульную сетку 960. Также доступны темный и светлый варианты оформления.

  • Jump To Links

    Стрелки "дальше" и "назад"

    улучшите страницы блога удобным инструментом перемещения.

Документация

  • Типовое использование

    Чтобы задействовать плагин подключите следующие файлы к странице в теге 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);
    								});