网页悬浮返回顶部图标可以说是一项非常常见切比较实用的功能，可以使用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格式文件，好处就是可以无限放大而不失真,这里一并提供下载：
点击下载top.svg文件
