Плавный скроллинг по странице к нужному элементу с использованием плагина PageScroll2id
В предыдущей статье Плавный скролл по странице к нужному ID (Scroll to id) рассматривал простой js-скрипт плавного скролла для навигации по странице, но в том скрипте был один изъян. Минус скрипта был в том, что при навигации нет никаких маркеров, какой пункт меню сейчас активен. А почти всегда нужно, чтобы при скроллинге по страничке в меню как-то выделялся пункт, который относится к просматриваемой секции.
Для таких целей я использую плагин PageScroll2id, у него есть подробная документация, и большое количество параметров, которые необходимы для любого Landing Page.
Скачать плагин можно по ссылке.
Подключаем jQuery и скрипт плагина jquery.malihu.PageScroll2id.min.js
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/jquery.malihu.PageScroll2id.min.js"></script>
В своем файле скриптов, например main.js или в футере страницы инициализируем плагин простым скриптом:
<script>
(function($) {
$(window).on("load", function() {
$("a[rel='m_PageScroll2id']").mPageScroll2id();
});
})(jQuery);
</script>
Плагин работает по тому же принципу – при нажатии на ссылку с якорем <a href="#id">link произойдет плавный скролл к нужному блоку с нужным ID <div id="id">target
. Но в документации указано, что у ссылки должен быть атрибут rel='m_PageScroll2id' по такому формату <a href="#id" rel='m_PageScroll2id'>link, но можно его не использовать, а использовать свой формат для ссылок, классы, id или просто с указанием для всех ссылок с якорями a[rel='m_PageScroll2id'], a.class-name, li.menu-item a[href*='#'].
По умолчанию плагин выполняет прокрутку страницы по вертикали, если же нужна прокрутка по горизонтали, тогда можно использовать такие параметры:
$("a[rel='m_PageScroll2id']").mPageScroll2id({
layout:"horizontal"
});
Для прокрутки и по горизонтали и по вертикали:
$("a[rel='m_PageScroll2id']").mPageScroll2id({
layout:"auto"
});
Изменяем скорость и плавность прокрутки к нужному блоку
$("a[rel='m_PageScroll2id']").mPageScroll2id({
scrollSpeed: 900,
scrollingEasing: "easeInOutQuint"
});
Задаем отступ от верхней части экрана. Это нужно, если используется фиксированное меню, то гда можно задать отступ равный по высоте этого меню, чтобы при прокрутке меню не перекрывало контент в активной секции.
$("a[rel='m_PageScroll2id']").mPageScroll2id({
offset: 77
});
По умолчанию, ссылкам присваивается класс mPS2id-highlight, который можно использовать для написания стилей CSS:
a.mPS2id-highlight{
background: #ff0;
}
Класс mPS2id-highlight срабатывает, когда блок находится в области видимости, и из-за этого, если в области видимости находится несколько небольших блоков, то они все могут быть выделены в меню. Поэтому я чаще всего использую класс mPS2id-highlight-first, который подсветит активным только тот блок, который отображается первым в области видимости.
a.mPS2id-highlight-first{
background: #ff0;
}
Рабочий пример:
See the Pen Easy scroll to id with PageScroll2id by Denis (@deniscreative) on CodePen.0
Один комментарий к “Плавный скроллинг по странице к нужному элементу с использованием плагина PageScroll2id”
Alexander
Спасибо за инфу! Скрипт реально хороший и главное куча возможностей и настроек. Использовал с jquery 3.2.1 – всё без глюков и конфликтов.