В этом компоненте реализован плавный скролл после нажатия на ссылку (кнопке) к нужному блоку на странице. Если в адресе страницы будет передан хэш и блок с таким селектором будет найден на странице, прокрутка в блок будет автоматически. Также модуль позволяет построить навигацию по странице с добавлением класса текущему пункту навигации (пункта меню) при скроллах к определенному блоку.
Использование компонента
К элементам навигации (пунктам меню) или к произвольному объекту добавляем HTML-атрибут data-fls-scrollto , а в качестве значения указываем CSS селектор блока к которому нужно прокрутить:
<a href="#" data-fls-scrollto=".имя класса блока" class="link">Пункт навигации</a><a href="#" data-fls-scrollto="#id блока" class="link">Пункт навигации</a>Если нужно, чтобы скролл учитывал шапку (не докручивал на высоту шапки, используется при фиксированных шапках), нужно добавить к объекту навигации атрибут data-fls-scrollto-header :
<a href="#" data-fls-scrollto-header data-fls-scrollto=".имя класса блока" class="link">Пункт навигации</a>Если нужно, чтобы скролл не докручивался к блоку на указанную высоту, необходимо добавить к объекту навигации атрибут data-fls-scrollto-top , а в качестве значения указать число – необходимую высоту:
<a href="#" data-fls-scrollto-top="30" data-fls-scrollto="#id блок" class="link">Пункт навигации</a>Добавление класса в текущий пункт навигации
Для включения функционала добавления класса необходимо задействовать компонент «наблюдатель» .
Для секций, при появлении которых будет добавляться класс в соответствующий пункт навигации, добавляем атрибут data-fls-watcher со значением navigator:
<a href="#" data-fls-scrollto=".some-section" class="link">Пункт навигации</a>
...
<section data-fls-watcher ="navigator" class="some-section"></section>После этого, при прокрутке к объекту навигации, в соответствующий пункт навигации будет добавлен класс —navigator-active. А когда объект исчезает с вьюпорта, класс убирается.
Прокрутка к нужному блоку по хэшу (при открытии страницы)
Чтобы прокрутить страницу к нужному блоку при открытии страницы необходимо добавить в адрес хэш, содержащий имя класса нужного блока .
Пример адресной строки и нужного блока:
<section class="some-section"> ... </section>