[網頁設計] 快速新增一個「回本頁上方」連結

作者: Jas / 發表於 2010-01-29

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>




回上方