網站添加返回頂部有好幾種，下面我簡單介紹下：

1 使用文字添加方法最簡單的是：最簡單的“返回頂部”代碼就是“<a href="javascript:scroll(0,0)">返回頂部</a>”（不包括引號），(0,0)代表座標，第一位是水平，第二位是垂直，(0,0)就表示網頁左上角，文字部分（返回頂部）可以自由替換成自己需要的內容，比如也可以用“TOP”都可以。

這里就是簡單返回頂部的代碼， 這里的 只是改成了返回游戲首頁~！

2。第二種復雜點

HTML 結構

我使用了 a 標簽作為這個結構，可能不太標準，但是比較方便。在 a 標簽中，內置了一個 span 標簽，用來顯示三角號。具體代碼如下：

<a id="回到頂部" href="#"> ??

? <span>回到頂部</span>?

</a>

對，你沒看錯，就這么簡單的一句代碼，直接在 a 標簽中，填寫一個三角號。剩下的就是使用 CSS 進行樣式控制。

CSS 代碼

#回到頂部{?

display:block; ?

width:60px;?

height:60px;

position:fixed; ?

bottom:50px; ?

right:40px;?

border-radius:10px 10px 10px 10px; ??

text-decoration:none; ?

display:none; ?

background-color:#999999; ? ??

}

上面這段代碼，定義了 a 標簽的外觀樣式，定義 display 為 block，這樣，我們才能指定它的 width 和 height。定義 position 為fixed，讓它固定在右下角。同時為它指定圓角，就是使用 border-radius 屬性，定于半徑為10px的圓角。

#回到頂部 span{?

display:block;?

width:60px;?

color:#dddddd;?

}?

#回到頂部 span:hover{?

color:#cccccc;?

}?

#gotop span{?

font-size:40px;?

text-align:center;?

margin-top:4px;?

}

上面這一段，就是定義了 span 標簽里面的三角號，至于如何打出這個“三角號”，使用搜狗輸入法，按下“Ctrl + Shift + z”，就會彈出搜狗的特殊字符，就可以找到了。這幾句代碼意思很簡單，就是定義了三角號的外觀樣式，同時制定了顏色變化，這是為了用戶體驗。最下面的 margin-top：4px，則是用來準確定位三角號，讓它居中顯示。

jQuery 代碼

具體的 jQuery 代碼如下，解析已經寫在注釋里面了：

$(function(){

$(window).scroll(function(){ ?//只要窗口滾動,就觸發下面代碼?

var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //獲取滾動后的高度?

if( scrollt >200 ){ ?//判斷滾動后高度超過200px,就顯示 ?

$("#回到頂部").fadeIn(400); //淡出 ? ??

}else{ ? ? ?

$("#回到頂部").stop().fadeOut(400); //如果返回或者沒有超過,就淡入.必須加上stop()停止之前動畫,否則會出現閃動 ??

}

});

$("#回到頂部").click(function(){ //當點擊標簽的時候,使用animate在200毫秒的時間內,滾到頂部

$("html,body").animate({scrollTop:"0px"},200);

});

});

還要下載個回到頂部的圖片上傳網站根目錄里！

怎么樣，簡單吧？就用這幾句代碼而已，就可以出現這個功能、。當然缺點也是有的，就是在IE6等過時的瀏覽器中，可能不會兼容，無法實現。

3種，就是也很簡單了，現在都有很多網站用的插件：友薦，自帶返回頂部 的JS

你只要是網站的擁有者，到上面去申請個號，復制它的代碼，這我就不寫了。很短的一段代碼，復復制進自己的文章內容頁：就可以了。

圖片都不用上傳，真的很輕松，也很方便！

總結

以上是生活随笔為你收集整理的教你网站怎么添加返回顶部代码?的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。