使用錨標記
需在body下放個隱藏的錨點標記,內容如下:
然後,在網頁底部放一個訪問鏈接即可:
此方法效果是一次直接跳到頂部,而且URL地址欄會顯示個#top。
使用JS scrollTo函數
javascript scroll函數(scrollBy scrollTo)是用來滾動頁面到指定位置,格式定義如下:■scrollBy(xnum,ynum)■scrollTo(xpos,ypos
■xnum,ynum分別指水平、垂直滾動多少像素,正值表示向右或向下滾動,負值表示向左或向上滾動
■xpos,ypos分別指水平和垂直座標。
scrollBy慢速滾動返回頂部
本方式使用上面提到的scrollBy函數,每次只滾動定量像素,整體看起來有點滾動效果,代碼如下:
scrollBy函數第二個參數我設了-100,越大(比如-10)滾動越慢,越小滾動越快,啟動滾動只需在頁面底部加個鏈接:
JQuery實現返回頂部功能
首先需要在頂部添加如下html元素:<p id="back-to-top"><a href="#top"><span></span>返回頂部</a></p>,其中a標籤指向錨點top,可以在頂部防止一個<a name="top"></a>的錨點,這樣在瀏覽器不支持js時也可以實現返回頂部的效果了。要想讓返回頂部的圖片顯示在右側,還需要一些css樣式,如下: