JQuery缓慢平滑回到顶部，超出区域自动显示隐藏

为什么要添加回到页面顶部的效果？

在浏览网页时我们可以发现当页面高度(鼠标滚轮滚动)到达一定页面区域时,页面的右侧会出现一个回到页面顶部的小按钮。

只需要点击一下按钮就能缓慢的回到页面顶部。
这使得用户不用再通过滚轮反复的滚动来回到页面顶部，从而进一步提高了用户的体验

如何实现？

<script>
    //首先创建一个‘按钮’(div)并且通过CSS样式使它跟随页面固定再右下角
    $(window).scroll(function(){                    //  添加滚动事件
        if( $(window).scrollTop() >= 500){          
            // 当窗口的scrollTop >=500时  让盒子出现
            $('div').css('display','block');
        }else{
            $('div').css('display','none');          //否则隐藏
        }
    });
    $('div').click(function(){                      //添加点击事件
        $('html,body').animate({'scrollTop':0});      
          //使文档可视区距离页面顶端的距离为0
          // 这里使用的是animate方法
         })

</script>