Anchor 錨點

在長內容旁提供一組定位連結,點擊捲動到對應區塊,並自動高亮目前位置。使用 Element Plus 的 el-anchor。

設計準則

• 用於單頁長內容的分段導覽:設定頁、規範／說明文件、活動詳情等有多個區段的頁面
• **放在內容側邊(垂直)**最常見;區段少時可放頂部(水平)
• offset 對齊固定表頭:頁面若有 sticky header,offset 設成 header 高度,才不會捲過頭被遮住
• 錨點文字與各區段標題完全一致,使用者才對得起來
• 樣式預設有標記線(marker);想更輕量用 type="underline"
• 錨點是「頁內導覽」,不是頁面間導覽——跨頁層級請用 Breadcrumb 或 Menu

基本用法(垂直)

container 指向捲動容器,點擊左側錨點會捲動右側區塊。

loading

子項目(巢狀錨點)

用 #sub-link 插槽在錨點下建立第二層子項目,適合區段本身還有小節。僅垂直模式支援。

loading

水平模式

loading

底線樣式

loading

Do / Don't

✅ Do	❌ Don't
錨點文字＝區段標題	錨點寫簡稱對不上內容
offset 對齊固定表頭	捲動後標題被 header 遮住
用於單頁分段導覽	拿來做跨頁導覽

給工程師

• container 接受 CSS 選擇器字串 / HTMLElement / Window;el-anchor-link 的 href 對應區塊的 id
• 常用 props:offset(捲動留白)、bound(觸發切換的門檻)、duration(捲動動畫)、marker、type(default / underline)、direction(vertical / horizontal)
• 需要錨點固定不動時,外層套 Affix 使用
• 完整 API 見 Element Plus Anchor 文件。本站規範優先於 EP 文件中的視覺建議。