1. 背景
很多時候，我們需要跳轉到一個指定id的元素的位置，其實有幾種實作方式。
2. 通過 jQuery 實作
可以通過jQuery跳到指定元素所在的高度位置
top
。
<html>
<head>
<title>base tag demo</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<input type="button" onclick="btnJump()" value="跳轉"/>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<div id="div1">此處</div>
<script>
function btnJump(){
$(window).scrollTop($("#div1").offset().top);
}
</script>
</body>
</html>
3. 通過超連結實作
其實還有一種更加簡單的方法，可以直接用超級連結實作。
<html>
<head>
<title>base tag demo</title>
</head>
<body>
<a href="#div1">跳轉</a>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<div id="div1">此處</div>
</body>
</html> 注意點選後，網頁位址中也包含main.html#div1。
是以我們直接通過在網頁後面添加#div1，即可在進入頁面時直接跳到div所在位置。
4. 對比總結
雖然超連結方式更加簡單，但是不夠靈活。
使用代碼的方式，我們可以完全自主掌握跳轉的時機和方式。
最後超連結還會在網頁後面添加字尾，有時候會影響頁面的正常運轉，特别是使用了一些前端架構時。
建議采用代碼控制。
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)