В этом модуле реализован плавный скролл по нажатию на ссылку (кнопке) к нужному блоку на странице. Если в адресе страницы будет передан хэш и блок с таким селектором будет найден на странице, прокрутка в блок будет автоматически. Также модуль позволяет построить навигацию по странице с добавлением класса текущему пункту навигации (пункта меню) при скроллах к определенному блоку.
Подключение функционала
[JS] В файле js/app.js раскомментировать строку flsScroll.pageNavigation();
Использование функционала
[HTML] К элементам навигации (пунктам меню) или к произвольному объекту добавляем HTML-атрибут data-goto , а в качестве значения указываем CSS селектор блока к которому нужно прокрутить:
<a href="#" data-goto=".имя класса блока" class="link">Пункт навигации</a>
<a href="#" data-goto="#id блока" class="link">Пункт навигации</a>Если нужно, чтобы скролл учитывал шапку (не докручивал на высоту шапки, используется при фиксированных шапках), нужно добавить к объекту навигации атрибут data-goto-header :
<a href="#" data-goto-header data-goto=".имя класса блока" class="link">Пункт навигации</a>Если нужно, чтобы скролл не докручивал блок на указанную высоту, необходимо добавить к объекту навигации атрибут data-goto-top , а в качестве значения указать число – необходимую высоту:
<a href="#" data-goto-top="30" data-goto="#id блока" class="link">Пункт навигации</a>data-goto-top можно совмещать с data-goto-header , тогда значение data-goto-top прибавится к высоте шапки.
Добавление класса в текущий пункт навигации
Для включения функционала добавления класса подключаем модуль наблюдателя:
[JS] В файле js/app.js раскомментировать строку import ‘./libs/watcher.js’
[HTML] Для блоков к которым прокручивается страница добавляем атрибут data-watch со значением navigator :
<a href="#" data-goto=".some-section" class="link">Пункт навигации</a>
...
<section data-watch="navigator" class="some-section"></section>После этого, при прокрутке к облаку (объекту) навигации, в соответствующий пункт навигации будет добавлен класс _navigator-active
Прокрутка к нужному блоку по хэшу (при открытии страницы)
Чтобы прокрутить страницу к нужному блоку при открытии страницы необходимо добавить в адрес хэш, содержащий имя класса нужного блока .
Пример адресной строки и нужного блока:
https://code.site.ru/index.html#some-section<section class="some-section">
...
</section>Добавление функционала, плавная прокрутка на iOS
По умолчанию прокрутка выполняется методом scrollTo() с параметром behavior: “smooth” без применения дополнительных плагинов. Но это ограничивает функционал этого модуля – нельзя указать скорость прокрутки, а также могут возникнуть проблемы в некоторых версиях браузеров на iOS . Для решения всех проблем можно подключить дополнительный плагин SmoothScroll, сделать это можно в файле js/files/scroll/gotoblock.js, раскомментировав строку import SmoothScroll from ‘smooth-scroll’; дальнейшее переключение прокрутки на плагин произойдет автоматически.
При работе с плагином появляется возможность указать скорость прокрутки, для этого элемента навигации нужно добавить атрибут data-goto-speed и указать число, означающее количество миллисекунд за прокручиваемый (1000 = 1 секунда), по умолчанию 500.
<a href="#" data-goto-speed="1000" data-goto=".some-section" class="link">Пункт навигации</a>Расположение и дополнительные данные
Функционал находится в js/files/scroll/scroll.js . Название функции pageNavigation() . Вспомогательный модуль прокрутки gotoblock находится в js/files/scroll/gotoblock.js . Модуль наблюдателя находится в файле js/libs/watcher.js .
Если в момент клика на пункт навигации было открыто меню Бургер, оно закроется автоматически.