Топ плагинов jQuery. Плагин Section Scroll

Топ плагинов jQuery. Плагин Section Scroll

От автора: приветствую вас, друзья. Продолжаем знакомиться с коллекцией ТОП плагинов jQuery. Сегодня мы познакомимся с полезным плагином для лендингов под названием Section Scroll. Данный jQuery плагин позволяет организовать сколл по секциям страницы.

Посещая сайты-одностраничники или даже просто сайты, с длинными страницами, вы могли заметить, насколько неудобно добираться до нужного вам контента. Особенно это неудобно делать на смартфонах. Пока долистаешь страницу до нужной секции — палец устанет 🙂

jQuery Плагин Section Scroll призван решить эту проблему. Плагин организует нечто вроде закладок на секции страницы, кликая по которым можно переходить к нужным секциям с плавным анимационным эффектом скроллинга.

Итак, перейдем на официальную страницу плагина на GitHub и скачаем его. Демо и документацию можно найти по этой ссылке.

Подключим необходимые для работы плагина файлы:

Теперь нам необходима разметка. Создадим три блока для простейшего примера.

Чтобы не заполнять их тестовым контентом, я просто укажу в стилях высоту побольше для класса scrollable-section (по умолчанию плагин работает именно с указанным классом).

Осталось лишь инициализировать плагин Section Scroll. В простейшем варианте для этого достаточно вызвать метод sectionScroll:

Если все сделано верно, тогда в правой части окна браузера мы должны увидеть названия секций (они задаются через атрибут data-section-title). Клик по названию нужной секции приведет к переходу к ней с плавным эффектом скролла. Выглядит эффектно.

Топ плагинов jQuery. Плагин Section Scroll

На странице документации плагина Section Scroll вы найдете несколько опций и метод, которые можно использовать при работе с плагином для реализации более продвинутого функционала. Ну а у меня на этом все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и JavaScript вы можете узнать из наших уроков или курса. Удачи!

Метки:

Похожие статьи:

Комментарии Вконтакте: