有錨點的連接頁面刷新的問題

　　最近在作一個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

 

 搞定！