Якоря

Якоря позволяют организовать переход к элементу с анимацией

Вы можете управлять ими как через 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) //Прокрутить страницу до элемента
PreviousБлоки оповещенийNextКонтакты

Last updated