網頁懸浮返回頂部圖示可以說是一項非常常見切比較實用的功能，可以使用HTML來實現，但是返回頂部效果太過僵硬，體驗不好，這裡分享一個純js返回頂部切具有過渡效果的例項。

效果如上圖所示。

具體程式碼如下：

HTML部分：

<div class="top"></div>

CSS部分：

.top {
    width: 0.6rem;
    height: 0.6rem;
    background: rgba(255,255,255,0.8) url(../images/top.svg) no-repeat;
    background-size: 0.6rem 0.6rem;
    position: fixed;
    right: .1413333333rem;
    bottom: 1.26rem;
    z-index: 8;
    cursor: pointer;
    display: none;
    border-radius: 50%;
-webkit-box-shadow: 0 0 0.128rem rgba(0,0,0,0.2);
    box-shadow: 0 0 0.128rem rgba(0,0,0,0.2);
}
 

JavaScript部分：

var topMain=$(".head").height()
    $(window).scroll(function(){
//如果滾動條頂部的距離大於topMain則就nav導航就新增類.nav_scroll，否則就移除。
if ($(window).scrollTop()>topMain){
$(".top").slideDown(500);
}
else{
$(".top").slideUp(500);
}
    });
$(".top").click(function(){$("body,html").animate({scrollTop:0},500)});
</script>
 

這裡返回頂部圖示使用的是一個.svg格式檔案，好處就是可以無限放大而不失真,這裡一併提供下載：