在各大网站中，都需要返回顶部小功能，以方便用户在拉动到底部时能够快速的返回顶部，我下面把我博客中使用到的分享一下：

HTML代码：

<div class="return_top"></div>

css样式：

.return_top{ 
  width: 50px; 
  height: 50px; 
  background: url(/front/images/top.png) no-repeat center rgba(0, 0, 0, 0.8); 
  position:fixed; 
  right: 30px; 
  bottom: 30px; 
  display: none; 
  cursor: pointer; 
  z-index: 99;
}

js代码：

$(function(){
    $(window).scroll(function(){
        var topDistance=$(window).scrollTop();  //获取鼠标在本窗口现有状态下移动的高度
        if(topDistance>100){  //如果移动高度大于100px,顶部图标单单显示出，如果移动高度小于等于100，顶部图标不显示
            $('.return_top').fadeIn(800);
        }else{
            $('.return_top').fadeOut(800);
        }
    });
    $('.return_top').on('click',function(){
        $('html,body').animate({scrollTop:0},800); //必须用$('html,body')选择，不然没效果
    })
});

• fadeIn() 方法使用淡入效果来显示被选元素，假如该元素是隐藏的。

• fadeOut() 方法使用淡出效果来隐藏被选元素，假如该元素是隐藏的。

• animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。