Якоря
Якоря позволяют организовать переход к элементу с анимацией
Вы можете управлять ими как через HTML, так и через Javascript
Управление через атрибуты
Для управления через HTML, необходимо добавить элементу атрибут data-anchor
и передать в него ссылку на элемент к которому необходимо прокрутить страницу.
Атрибут data-anchor-duration
отвечает за скорость прокрутки в миллисекундах.
Атрибут data-anchor-hash
используется для изменения ссылки при прокрутке страницы
<ul class="nav-menu">
<li class="nav-menu-item"><a href="#" data-anchor="#anchor1" class="nav-menu-link" rel="nofollow">Anchor link #1</a></li>
<li class="nav-menu-item"><a href="#" data-anchor="#anchor2" class="nav-menu-link" rel="nofollow">Anchor link #2</a></li>
<li class="nav-menu-item"><a href="#" data-anchor="#anchor3" class="nav-menu-link" rel="nofollow">Anchor link #3</a></li>
<li class="nav-menu-item"><a href="#" data-anchor="#anchor4" data-anchor-duration="3000" class="nav-menu-link" rel="nofollow">Anchor with custom duration</a></li>
<li class="nav-menu-item"><a href="#" data-anchor="#anchor5" data-anchor-hash="anchor5" class="nav-menu-link" rel="nofollow">Anchor with hash change</a></li>
</ul>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="anchor1">Element1</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="anchor2">Element2</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="anchor3">Element3</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="anchor4">Element4</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="anchor5">Element5</div>
Управление через Javascript
Чтобы управлять прокруткой через Javascript, необходимо обратиться к статическому методу PipUI.Anchor.scroll()
, который принимает параметры HTMLElement и options.
PipUI.Anchor.scroll('#anchor1');
Опции
// Выводить в консоль отладку
debug: false
// Скорость прокрутки по умолчанию
defaultDuration: 400
// Функция обратного вызова по умолчанию
defaultCallback: undefined
Методы
PipUI.Anchor.setOptions(object) // Изменить опции блока. DOM не будет изменен
PipUI.Anchor.getOptions() // Получить опции блока
PipUI.Anchor.scroll(string|object, object) //Прокрутить страницу до элемента
Last updated