От автора: приветствую вас, друзья. Продолжаем знакомиться с коллекцией ТОП плагинов jQuery. Сегодня мы познакомимся с полезным плагином для лендингов под названием Section Scroll. Данный jQuery плагин позволяет организовать сколл по секциям страницы.
Посещая сайты-одностраничники или даже просто сайты, с длинными страницами, вы могли заметить, насколько неудобно добираться до нужного вам контента. Особенно это неудобно делать на смартфонах. Пока долистаешь страницу до нужной секции — палец устанет 🙂
jQuery Плагин Section Scroll призван решить эту проблему. Плагин организует нечто вроде закладок на секции страницы, кликая по которым можно переходить к нужным секциям с плавным анимационным эффектом скроллинга.
Итак, перейдем на официальную страницу плагина на GitHub и скачаем его. Демо и документацию можно найти по этой ссылке.
Подключим необходимые для работы плагина файлы:
1 2 3 |
<link href="css/section-scroll.css" rel="stylesheet"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/jquery.section-scroll.js"></script> |
Теперь нам необходима разметка. Создадим три блока для простейшего примера.
1 2 3 4 5 6 7 8 9 |
<div class="scrollable-section" data-section-title="About Us"> <h1>About Us</h1> </div> <div class="scrollable-section" data-section-title="Example"> <h1>Example</h1> </div> <div class="scrollable-section" data-section-title="Testimonials"> <h1>Testimonials</h1> </div> |
Чтобы не заполнять их тестовым контентом, я просто укажу в стилях высоту побольше для класса scrollable-section (по умолчанию плагин работает именно с указанным классом).
1 2 3 |
.scrollable-section{ height: 1000px; } |
Осталось лишь инициализировать плагин Section Scroll. В простейшем варианте для этого достаточно вызвать метод sectionScroll:
1 2 3 |
$(function(){ $('body').sectionScroll(); }); |
Если все сделано верно, тогда в правой части окна браузера мы должны увидеть названия секций (они задаются через атрибут data-section-title). Клик по названию нужной секции приведет к переходу к ней с плавным эффектом скролла. Выглядит эффектно.
На странице документации плагина Section Scroll вы найдете несколько опций и метод, которые можно использовать при работе с плагином для реализации более продвинутого функционала. Ну а у меня на этом все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и JavaScript вы можете узнать из наших уроков или курса. Удачи!