Плавный скроллинг по странице к нужному элементу с использованием плагина PageScroll2id

19.02.2019
TemplateMonster - лучшая коллекция шаблонов для CMS WordPress

В предыдущей статье Плавный скролл по странице к нужному 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

TemplateMonster - лучшая коллекция шаблонов для CMS WordPress

Полезная инфа:

Один комментарий к “Плавный скроллинг по странице к нужному элементу с использованием плагина PageScroll2id”

  • Alexander

    Спасибо за инфу! Скрипт реально хороший и главное куча возможностей и настроек. Использовал с jquery 3.2.1 – всё без глюков и конфликтов.

    Ответить

Оставить комментарий