Back To Top

我們一般都用錨點anchor來實現「連結捲動scroll to到同一網頁指定位置」的設計需求。

這種錨點連結作法,通常得先在指定位置下一個「id」或「name 」,然後再把連結設為「#id」或「#name 」。

<a id="top"></a>
……
<a href="#top">go top</a>

<a name="top"></a>
……
<a href="#top">go top</a>

不過,如果你只需要一個回本頁上方Back To Top的連結,其實可以更省事地把連結設為「#」,然後塞到</head>。

接著,再以絕對定位absolute position的寫法,把這個「回本頁上方」連結鎖定在頁面右下角,就可以發揮無處不在的回頁面頂端即點即捲功能。

這種快速新增「回本頁上方」的Inline寫法,只要直接把以下這段html語法貼到</head>之前即可:

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="http://public.blu.livefilestore.com/y1pZlI1EIljTEO1GZhDHoKYQfxFtz81NjVSM19u5avSPPIrjwN1uHCiWULYXgNUGfaZdqsnIuoTa3NQJXq2Az5HTA/backtotop.gif" alt="Back to Top" border="0" width="17px" height="75px" /></a>

另外,你也可以把CSS跟HTML分開寫,先在CSS新增:

#backtotop{display:scroll;position:fixed;bottom:5px;right:5px;}

接著再把以下這段html語法貼到</head>之前即可:

<a id="backtotop" href="#" title="Back to Top"><img src="http://public.blu.livefilestore.com/y1pZlI1EIljTEO1GZhDHoKYQfxFtz81NjVSM19u5avSPPIrjwN1uHCiWULYXgNUGfaZdqsnIuoTa3NQJXq2Az5HTA/backtotop.gif" alt="Back to Top" border="0" width="17px" height="75px" /></a>

5 留言

jia wei寫道…
真是太好用了,感謝jas9大分享 Or2 (膜拜一下)
GoldenMango寫道…
<a>包在<head>裡面是不嚴謹的寫法,雖然瀏覽器會吃,但還是不建議這樣寫
Unknown寫道…
可以參考一下tumblr的做法 只有往下拉以後 回到開頭才會出現..
Jas寫道…
如果碰巧用得上,歡迎隨意取用。

不過,就像GoldenMango所提醒的,按正統的作法,head裡面應該只會出現<base><link><meta><script><style><title>這幾種標籤。

至於tumblr,不知道哪裡可以看到它的作法?(很久以前用Jas9這帳號去開來試用的頁面並沒有這樣的東西)
Alec寫道…
tumblr的作法可以在dashboard頁面找到,還蠻特別的
較新的 較舊