有錨點的連結頁面重新整理的問題

標籤：

　　最近在做一個AIP頁面的文檔，基本左邊都是錨點連結，右邊是具體的API。程式告訴我點擊左邊的錨點右邊可以跳轉，但是重新整理的時候會回到頂部。之後我查了下，可以用hash擷取跳轉的錨點。再用jquery animate重新滾動到當前頁面即可。

　　

1 $(function(){2    var anchor = window.location.hash;//擷取地址#後的內容3    var subanchor=  anchor.substr(1);//去掉#號；4    var top = $("#"+subanchor).offset().top;//擷取ID距離頂部距離5    $("body,html").animate({6        scrollTop:top 7    },0); 8 })

View Code

 

　　然後發現這麼寫有些BUG，比如沒有考慮頁面頂部的高度，跳轉並不精準，關鍵不同瀏覽器還有1px的差距。然後再次修改代碼：

 

1 if(window.location.hash.length>0){//判斷是否有錨點，否則頁面一直重新整理2     window.location.href=window.location.href;   3 }

View Code

 

 搞定！

 

有錨點的連結頁面重新整理的問題