jquery返回顶部特效代码

网页悬浮返回顶部图标可以说是一项非常常见切比较实用的功能，可以使用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部分：

<script>
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格式文件，好处就是可以无限放大而不失真,这里一并提供下载：

点击下载top.svg文件