html 頁面內錨點定位及跳轉方法總結

參考網址:程式前沿

文中提及共有四種不同的方法可以實現
第四種方法不錯喔!節錄如下:

第一種方法,也是最簡單的方法是錨點用<a>標籤,在href屬性中寫入DIV的id。如下:
 

<!DOCTYPE html>
<html>
<body>
<h2>
<a href="#div1">to div1</a>
<a href="#div2">to div2</a>
<a href="#div3">to div3</a>
</h2>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</body>
</html>

這種方法的缺點是點選錨點之後,瀏覽器的URL會發生變化,如果重新整理可能會出現問題。


第四種方法是用js的srollIntoView方法,直接用:

document.getElementById("divId").scrollIntoView();

這種方法的好處,是URL不會變,同時能夠響應相應的scroll事件,不需要演算法什麼的。

本篇發表於 程式設計。將永久鏈結加入書籤。