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

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

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

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

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

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

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

<link href="css/section-scroll.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.section-scroll.js"></script>

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

<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 (по умолчанию плагин работает именно с указанным классом).

.scrollable-section{
	height: 1000px;
}

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

$(function(){
	$('body').sectionScroll();
});

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

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

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

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

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

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

Метки:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree