/ Скрипты / Scrollify — быстрый скроллинг по странице

Scrollify — быстрый скроллинг по странице

Автор: delux · Опубликовано 16.04.2016 · Обновлено 25.02.2019

Scrollify — быстрый скроллинг по странице — плагин позволяет перемещаться быстро, но в то же время плавно по необходимым секциям страницы.

Как реализовать:

1. Разметка html

<!doctype html>
<html>
    <head>
        <script>
            $(function() {
                $.scrollify({
                    section : "section",
                });
            });
        </script>
    </head>
    <body>
        <section></section>
        <section></section>
    </body>
</html>

<!doctype html>

<html>

<head>

$(function() {

$.scrollify({

section : "section",

});

</script>

</head>

<body>

</body>

</html>

2. Настройки по умолчанию

$.scrollify({
    section : "section",
    sectionName : "section-name",
    easing: "easeOutExpo",
    scrollSpeed: 1100,
    offset : 0,
    scrollbars: true,
    before:function() {},
    after:function() {}
});

$.scrollify({

section : "section",

sectionName : "section-name",

easing: "easeOutExpo",

scrollSpeed: 1100,

offset : 0,

scrollbars: true,

before:function() {},

after:function() {}

});

Список опций:

section — селектор для секций (разделов) на странице
sectionName — scrollify позволяет определить для каждого раздела своё хеш значение. Это позволяет иметь каждому разделу свою постоянную ссылку, которая задается в атрибуте data. Название атрибута data определяется в параметре \’sectionName\’.
easing — определяет используемый метод easing.
offset — расстояние в пикселях для комппенсации положения каждого раздела.
scrollbars — true или false — определяет будет ли видна полоса прокрутки.
before — функция обратного вызова, которая вызвается до того как был вызван метод скроллирования до раздела. Аргументы включают index раздела и массив всех разделов.
after — функция обратного вызова, которая вызывается после того, как мы прокрутили до нового раздела. Аргументы включают index раздела и массив всех разделов.

Методы
Метод движения может быть использован для перехода к конкретному разделу. Можно привязать либо к index-у раздела или к названию раздела определяемому в хеше атрибута data.