Scrollify — быстрый скроллинг по странице
Scrollify — быстрый скроллинг по странице — плагин позволяет перемещаться быстро, но в то же время плавно по необходимым секциям страницы.
Как реализовать:
1. Разметка html
<!doctype html>
<html>
<head>
<script>
$(function() {
$.scrollify({
section : "section",
});
});
</script>
</head>
<body>
<section></section>
<section></section>
</body>
</html>2. Настройки по умолчанию
$.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.
$.scrollify("move","#name");Готово!
