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

我們一般都用錨點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>

延伸閱讀

• Inline CSS轉換器
• 覆寫Inline CSS的覆寫功能作法
• CSS Hacks：FireFox, IE6, IE7, IE8
• IE載入外連CSS的檔案數及尺寸限制