Представляем наворот мини хак Scrollify — слайдер для тач-устройств плагин на jQuery, он помогает быстро и плавно спуститься к нужному разделу или блоку страницы. Scrollify - ускоритель прокрутки колёсика мыши, настраиваемый и оптимизированный скрипт для touch устройств. Все больше интернет площадок создаются под различные разрешения экранов компьютеров и мобильных устройств. При использование с тач устройствами определенные свойства, псевдоклассы, и прочие каким либо теги могут не работать. Данный скрипт решит проблему на сайтах под управлением дле.
Scrollify - ускоритель прокрутки колёсика мыши требует присутствия jQuery 1.6+ и библиотеки jquery.easing.js для плавной анимации. Поддерживаются следующие браузеры: IE7+, Chrome, Firefox, Opera, Safari.
Базовая настройка добавляет на главную страницу сайта DataLife Engine, т.е. в main.tpl
<!doctype html>
<html>
<head>
<script>
$(function() {
$.scrollify({
section : "section",
});
});
</script>
</head>
<body>
<section></section>
<section></section>
</body>
</html>Настройка, это код
$.scrollify({
section : "section",
sectionName : "section-name",
easing: "easeOutExpo",
scrollSpeed: 1100,
offset : 0,
scrollbars: true,
before:function() {},
after:function() {}
});[spoile=Опцииr]section - селектор для секций (разделов) на странице
sectionName - scrollify позволяет определить для каждого раздела своё хеш значение. Это позволяет иметь каждому разделу свою постоянную ссылку, которая задается в атрибуте data. Название атрибута data определяется в параметре 'sectionName'.
easing - определяет используемый метод easing.
offset - расстояние в пикселях для компенсации положения каждого раздела.
scrollbars - true или false - определяет будет ли видна полоса прокрутки.
before - функция обратного вызова, которая происходит до того, как был вызван метод скроллирования до раздела. Аргументы включают index раздела и массив всех разделов.
after - функция обратного вызова, которая происходит после того, как мы прокрутили до нового раздела. Аргументы включают index раздела и массив всех разделов.
[/spoiler]
Методы
Метод движения может быть использован для перехода к конкретному разделу. Можно привязать либо к index-у раздела или к названию раздела определяемому в хеше атрибута data.
$.scrollify("move","#name");Смотрите демо внутри архива
Скачать: