本篇文章主要介紹了JS如何實現在頁面上快速定位（錨點跳轉問題），具有一定的參考和學習js的價值，對JS感興趣的小伙伴們可以參考一下本篇文章
1. 錨點跳轉簡介
錨點其實就是可以讓頁面定位到某個位置上的點。在高度較高的頁面中經常見到。
錨點跳轉有兩種形式：
a標籤+ name / href 屬性
使用標籤的id屬性
在html 4.0以前，只有使用 標籤的name 屬性才能建立片段識別碼。 id 屬性的出現，使所有 HTML 或 XHTML 元素都可以是片段識別碼。這是因為 id 標識符幾乎可以用在所有的標籤中。 標籤為了能夠和先前的版本相容而保留了 name 屬性，同時也可以使用 id 屬性。這些屬性可以互相交換使用，可以把 id 屬性看成是 name 屬性的升級版本。 name 和 id 屬性都可以與 href 屬性結合使用，這樣一個 標籤就可以同時作為超連結和片段識別碼使用。
<a href="#he" rel="external nofollow" rel="external nofollow" >波轮洗衣机介绍</a> <a href="#f" rel="external nofollow" ></a>
但這種方法使用了一個空標籤，而且有時候會出現錨點失效。所以建議採用id來綁定錨點，程式碼如下：
<a href="#he" rel="external nofollow" rel="external nofollow" >波轮洗衣机介绍</a><h2 id="#de">波轮洗衣机介绍</h2>
2. 含錨點跳轉的URL位址
window.location.hash
【1】關於
#在頁面的製作中，「#」的符號很常見，並且具有通用性。基本上，其表示的意思是id選擇符。同樣的，在頁面的URL中，#也可以理解為id選擇符之意，也就是頁面跳到含URL指向的id標籤處。
這個位址中最後有個'#'，這個就相當於告訴瀏覽器要跳轉了，#後面跟著的3表示會在http://www.php.cn/view /121416.htm?p=1的頁面中尋找符合#3特點的標籤並且執行跳躍。
【2】關於空錨點指向
如果URL中的#後面跟隨的字元id在文中找不到，就會有兩種情況：如果是在目前頁面，除了URL位址變化了，其他的不會改變，頁面不會有跳轉；如果是從其他頁面跳轉過來，則頁面會在頂部顯示，'#'基本上就是擺設。
【3】window.location.hash
#3. Jquery下錨點的平滑跳躍。
如果讓頁面平滑捲動到一個id為box的元素處，則JQuery程式碼只要一句話，關鍵位置如下：
$('html, body').animate({scrollTop: $('#box').offset().top}, 1000)JS原生實作。
scrollTo() 方法可把內容捲動到指定的座標。
scrollTo(xpos,ypos);
4. IE下錨點刷新失效及JQuery下的解決
##【1】關於錨點刷新失效$(function() {
var url = window.location.toString();
var id = url.split('#')[1];
if (id) {
var t = $('#' + id).offset().top;
$(window).scrollTop(t);
}
})以上是JS如何實現在頁面上快速定位（錨點跳轉問題）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
