天天看點

HTML 錨點超連結

先介紹下場景:

我做了一個部落格管理

首頁界面如下:

HTML 錨點超連結

 标題是超連結,點選标題,進入部落格詳情頁面:

HTML 錨點超連結

部落格标題下面有一個"傳回"超連結,點選回到部落格清單,超連結代碼:

HTML 錨點超連結

<a href="javascript:history.go(com.whuang.hsj.hrefclickcount)">傳回</a>  

 說明:com.whuang.hsj.hrefclickcount的初始值為-1 ,

HTML 錨點超連結

後來我發現有的部落格很長,從部落格底部回到标題那兒,必須滾動滑鼠滾老半天,太不人性化了.

于是我在部落格底部增加了一個超連結"回到部落格标題",如下:

HTML 錨點超連結

 但是問題出現了:

我點選"回到部落格标題"超連結之後,再點選"傳回",又會回到部落格底部,我知道什麼原因.

"回到部落格标題"超連結 使用了錨點跳轉,但是也屬于跳轉,跳轉之後,部落格底部就屬于history了.是以再點選"傳回"超連結就會回到history.

"回到部落格标題"超連結實作代碼:

HTML 錨點超連結

var ainput =document.createelement("a");    

                ainput.href="#title_loc";  

                ainput.innerhtml="回到部落格标題";  

                ainput.classname="frontbloghrefclass";//class 樣式,在單獨的css檔案中定義  

                ainput.onclick=function(){  

                    //注意:不論點選多少次"回到部落格标題",go(-2)就可以回到部落格清單  

                    com.whuang.hsj.hrefclickcount=-2;  

                }  

                contentdiv.appendchild(ainput);  

                var span333 =document.createelement("span");    

                span333.innerhtml="  | <a class=\"frontbloghrefclass\" href=\"javascript:history.go(com.whuang.hsj.hrefclickcount)\">傳回部落格清單</a>";  

                contentdiv.appendchild(span333);  

 錨點位置:

HTML 錨點超連結

怎麼辦呢?

解決方法:

"回到部落格标題"超連結點選一次就把com.whuang.hsj.hrefclickcount 自減1,但是實際測試有問題,如果我點選兩次以上,再點選"傳回"頁面就會回到很早的頁面(不是部落格清單頁面).

最終解決方法:

HTML 錨點超連結

不論點選多少次"回到部落格标題",go(-2)就可以回到部落格清單  

HTML 錨點超連結

注意:

(2)部落格詳情頁面的"傳回部落格清單"超連結和"傳回"超連結相同.

繼續閱讀