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

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

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

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

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

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

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

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

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

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

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

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

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

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

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree