> For the complete documentation index, see [llms.txt](https://v2-0-0.pipui.ru/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://v2-0-0.pipui.ru/components/anchor.md).

# Якоря

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

Вы можете управлять ими как через HTML, так и через Javascript

## Управление через атрибуты <a href="#control-via-attributes" id="control-via-attributes"></a>

Для управления через HTML, необходимо добавить элементу атрибут <mark style="color:orange;">`data-anchor`</mark> и передать в него ссылку на элемент к которому необходимо прокрутить страницу.

Атрибут <mark style="color:orange;">`data-anchor-duration`</mark> отвечает за скорость прокрутки в миллисекундах.

Атрибут <mark style="color:orange;">`data-anchor-hash`</mark> используется для изменения ссылки при прокрутке страницы

```html
<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>
```

{% embed url="<https://codepen.io/pipui/pen/abjqmLW>" %}
Пример работы кода выше
{% endembed %}

## Управление через Javascript <a href="#control-via-javascript" id="control-via-javascript"></a>

Чтобы управлять прокруткой через Javascript, необходимо обратиться к статическому методу <mark style="color:orange;">`PipUI.Anchor.scroll()`</mark> , который принимает параметры HTMLElement и options.

```javascript
PipUI.Anchor.scroll('#anchor1');
```

### Опции <a href="#options" id="options"></a>

```
// Выводить в консоль отладку
debug: false

// Скорость прокрутки по умолчанию
defaultDuration: 400

// Функция обратного вызова по умолчанию
defaultCallback: undefined
```

### Методы <a href="#methods" id="methods"></a>

```javascript
PipUI.Anchor.setOptions(object) // Изменить опции блока. DOM не будет изменен

PipUI.Anchor.getOptions() // Получить опции блока

PipUI.Anchor.scroll(string|object, object) //Прокрутить страницу до элемента
```