來源于：
https://blog.wpjam.com/m/pure-code-4-back-2-top/
這次，潛行者m給大家帶來一個比較實用的 jQuery 技巧，為你的網站添加一個純代碼畫出來的、簡潔美觀的回到頂部按鈕。這個按鈕的效果就是，當頁面滑動一段距離之后，就會浮現出來這個按鈕，點擊這個按鈕之后，就自動滾動到頂部。
點擊之后就會跳轉到頂部，然后這個按鈕平滑消失。與網上的相比，潛行者m版的是純代碼，加載速度更快，效果色彩控制好；代碼精簡，只有數條而已，拒絕大坨大坨的代碼。廢話不多說，下面就開始制作。
HTML 結構
我使用了 a 標簽作為這個結構，可能不太標準，但是比較方便。在 a 標簽中，內置了一個 span 標簽，用來顯示三角號。具體代碼如下：
<a id="gotop" href="#">
<span>▲</span>
</a>
對，你沒看錯，就這么簡單的一句代碼，直接在 a 標簽中，填寫一個三角號。剩下的就是使用 CSS 進行樣式控制。
CSS 代碼（刪除display:none; ）
#gotop{
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的圓角。
#gotop span{
display:block;
width:60px;
color:#dddddd;
}
#gotop 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,就顯示
$("#gotop").fadeIn(400); //淡出
}else{
$("#gotop").stop().fadeOut(400); //如果返回或者沒有超過,就淡入.必須加上stop()停止之前動畫,否則會出現閃動
}
});
$("#gotop").click(function(){ //當點擊標簽的時候,使用animate在200毫秒的時間內,滾到頂部
$("html,body").animate({scrollTop:"0px"},200);
});
});
怎么樣，簡單吧？就用這幾句代碼而已，就可以出現這個功能，而且可以方便的修改顏色、形狀、大小等。當然缺點也是有的，就是在IE6等過時的瀏覽器中，可能不會兼容，無法實現。
