Якорь

Навигация-оглавление, синхронизированная с прокруткой. Клик переносит к целевому разделу, при прокрутке подсвечивается текущий раздел.

Якорь

<template>
  <div class="demo-col" style="max-width: 640px">
    <div class="demo-row" style="align-items: flex-start; gap: 24px">
      <div ref="scroller" class="anchor-scroller">
        <div id="anchor-a" class="anchor-sec">
          <h3>Горы и камни</h3>
          <p>Горы и камни написаны штрихом «дождевые капли», образ полон мощи.</p>
        </div>
        <div id="anchor-b" class="anchor-sec">
          <h3>Леса и деревья</h3>
          <p>Листья проработаны контуром и точками.</p>
        </div>
        <div id="anchor-c" class="anchor-sec">
          <h3>Водный источник</h3>
          <p>Нить водопада висит в облаках.</p>
        </div>
        <div id="anchor-d" class="anchor-sec">
          <h3>Колофон</h3>
          <p>Подпись Фань Куаня скрыта в чаще леса.</p>
        </div>
      </div>
      <LhAnchor :items="items" :target="scrollerEl" :offset="12" direction="vertical" smooth />
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    items: [
      { id: 'anchor-a', title: 'Горы и камни' },
      { id: 'anchor-b', title: 'Леса и деревья' },
      { id: 'anchor-c', title: 'Водный источник' },
      { id: 'anchor-d', title: 'Колофон' },
    ],
    scrollerEl: undefined,
  }),
}
</script>

Props

Проп	Описание	Тип	По умолчанию
items	Данные якорей (поддерживают дочерние элементы)	LhAnchorItem[]	—
target	Контейнер прокрутки (селектор или элемент; по умолчанию window)	string \| HTMLElement	—
offset	Отступ области якоря от верхнего края контейнера прокрутки (для синхронизации)	number	—
direction	Направление расположения	'vertical' \| 'horizontal'	'vertical'
smooth	Плавная прокрутка	boolean	false
sx	Сокращённая запись разметки через sx	—	—

AnchorItem Props

Проп	Описание	Тип	По умолчанию
id	id целевого элемента	string	—
title	Отображаемый текст	string	—
children	Дочерние якоря	LhAnchorItem[]	—

Совет

Классы .anchor-scroller / .anchor-sec в demo — лишь пример стилей (контейнер прокрутки должен сам иметь overflow-y: auto); библиотека их не предоставляет.