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

53

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

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

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

Отже, перейдемо на офіційну сторінку плагіна на GitHub і завантажити його. Демо і документацію можна знайти за цим посиланням.

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

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

About Us

Example

Testimonials

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

.scrollable-section{
height: 1000px;
}

Залишилося лише ініціалізувати плагін Section Scroll. У найпростішому варіанті для цього достатньо викликати метод sectionScroll:

$(function(){
$(‘body’).sectionScroll();
});

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

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

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