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


Posted by itiswonderfall on 2022-05-15

前言

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

anchor

圖片來源

 


 

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 屬性

#f2e #F2E合作社 #js #JS註冊組 #javascript #錨點







Related Posts

綜合能力測驗 - 破關紀錄

綜合能力測驗 - 破關紀錄

Colab 中開啟 Tensorboard

Colab 中開啟 Tensorboard

[新手村系列] Python 101 快速入門教學

[新手村系列] Python 101 快速入門教學


Comments