F2E合作社｜在HTML中設置錨點的三種方式

前言

前陣子在執行專案時，因為不想要點擊錨點會改變網址名稱，所以就上網找看看有沒有解決辦法，結果查到可以用 JavaScript ，實測後發現不但方便而且又不難，所以想記錄跟分享一下。

（ 圖片來源 ）

1. 使用 name 屬性

name 屬性用於指定錨點的名稱，也可以建立（ 大型 ）文件內的書籤。

使用 name 屬性設置錨點很方便，但只能針對 a 標籤來使用，具有一定的局限性，對於 div ⋯⋯等等沒有 name 屬性的標籤就起不了作用。

<a name="top">置頂位置</a>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<a href="#top">Top</a>

2. 使用 id 屬性

這種方式可以針對所有標籤設置錨點進行所謂的局部定位。

<div id="top">
    <br><br><br><br><br>
    <br><br><br><br><br>
    置頂位置
    <br><br><br><br><br>
    <br><br><br><br><br>
</div>
<a href="#top">Top</a>

3. 使用 JavaScript

這種方式跳轉連結不需要用 a 標籤，對任意標籤都可以使用，設置點擊事件跳到對應的 id 就好了。

<div id="top">
    <br><br><br><br><br>
    <br><br><br><br><br>
    置頂位置
    <br><br><br><br><br>
    <br><br><br><br><br>
</div>
<p onclick="javascript:document.getElementById('top').scrollIntoView()">Top</p>

參考資料

1. 在HTML中设置锚点常用的有三种方式
2. HTML <a> 標籤的 name 屬性