Scrollify — быстрый скроллинг по странице
Scrollify — быстрый скроллинг по странице — плагин позволяет перемещаться быстро, но в то же время плавно по необходимым секциям страницы.
Как реализовать:
1. Разметка html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!doctype html> <html> <head> <script> $(function() { $.scrollify({ section : "section", }); }); </script> </head> <body> <section></section> <section></section> </body> </html> |
2. Настройки по умолчанию
|
1 2 3 4 5 6 7 8 9 10 |
$.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 раздела и массив всех разделов.
sectionName — scrollify позволяет определить для каждого раздела своё хеш значение. Это позволяет иметь каждому разделу свою постоянную ссылку, которая задается в атрибуте data. Название атрибута data определяется в параметре \’sectionName\’.
easing — определяет используемый метод easing.
offset — расстояние в пикселях для комппенсации положения каждого раздела.
scrollbars — true или false — определяет будет ли видна полоса прокрутки.
before — функция обратного вызова, которая вызвается до того как был вызван метод скроллирования до раздела. Аргументы включают index раздела и массив всех разделов.
after — функция обратного вызова, которая вызывается после того, как мы прокрутили до нового раздела. Аргументы включают index раздела и массив всех разделов.
Методы
Метод движения может быть использован для перехода к конкретному разделу. Можно привязать либо к index-у раздела или к названию раздела определяемому в хеше атрибута data.
|
1 |
$.scrollify("move","#name"); |
Готово!
