jquery点击后缓慢回到网页顶部，实现过程

这是个很简单，但是很实用的功能，其实一般都懂回到网页顶部，只需要类似设置锚点，最快的方法就是将href的值给#号就行了，但是最近一般都在追求用户体验，直接一瞬间到顶部确实感觉不是很舒服。网上给出了很多教程，但是我仍然觉得需要自己整理下，而且这些代码复制粘贴就可以直接用得上，节约之后的开发时间。

html代码如下：

<div class="gotop">
<a href="javascript:;">Top</a>
</div>

就这么简单，可以放在body标签对中任意位置。

CSS样式如下：

.gotop{position:fixed;
bottom:10px;
right:10px;
width:50px;
height:50px;
background: #14a5c0;
text-align:center;
line-height:50px;
font-size:16px;
font-weight:600;
opacity:0.9;
display:none;}
.gotop a{display:block;
width:100%;
height:100%;
color:#fff;}

样式定义按钮的形状，颜色，半透明属性和相对于页面的位置，设置按钮默认不显示。

js代码如下（注意，需要在页面上引入jquery）

$(document).ready(function(){
    $(window).scroll(function(){                            
        if($(window).scrollTop()<=100){
            $(".gotop").fadeOut(500);    
        }else{
            $(".gotop").fadeIn(500);
        }
    })
    $(".gotop").click(function(){
        $('body,html').animate({scrollTop:0},500);
    })
});

意思就是，在网页加载完毕后，当滚动条移动到距离头部100像素的时候，回顶部的按钮出现，当距离小于100像素的时候，按钮隐藏。

效果图如下：