原生js实现淘宝首页回到顶部效果

淘宝首页的回到顶部按钮是这样的：下拉到一定距离后按钮才显示出来，鼠标放到按钮上时，按钮背景会变成灰色，并且图标变成了文字。点击按钮缓慢回到顶部

我们先分析下实现这样的效果需要添加哪些事件。鼠标移进移出按钮，按钮表现发生变化，所以需要给按钮添加mouseover， mouseout事件。要侦听滚动条的变化，所以需要给window添加scroll事件，点击按钮回到顶部，按钮添加click事件。我们将事件处理程序封装成三个函数moveIn, moveOut,  goTop;

下面先给出html/css代码

<div class="container">
       <div class="header">头部</div>
       <div class="content">主要内容，高度是2000px</div>
        <div class="footer>底部</div>
        <div id="btn">返回顶部</div>
</div>

.container { width: 980px; margin: 0 auto; height: auto; background: #aaa;}
.content { height: 2000px; border: 1px solid blue