我們一般都用錨點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>
延伸閱讀
不過,就像GoldenMango所提醒的,按正統的作法,head裡面應該只會出現<base><link><meta><script><style><title>這幾種標籤。
至於tumblr,不知道哪裡可以看到它的作法?(很久以前用Jas9這帳號去開來試用的頁面並沒有這樣的東西)