Anchor アンカー

スクロール連動の目次ナビゲーションです。クリックで対象領域にジャンプし、スクロール時に現在のセクションをハイライトします。

アンカー

<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 は単なるサンプルスタイルです（スクロールコンテナ自体が overflow-y: auto を持つ必要があります）。ライブラリ自身は提供しません。