使用jQuery回到顶部

 

1. 我们这个的布局很简单，只需要一张图片和一个按钮。
2. 我们将图片放在一个类名为div1的div里面，我们给这个div一些样式：width:1200px; margin:0 auto;
3. 我们再在div外面放一个button按钮，我们给这个按钮写一下样式：width: 40px; height: 40px; right:35px; bottom:20px; display:none; background-image: url('../../Content/images/top_bg.png'); background-position: 0px -40px; border:none; position:fixed;我们给这个button按钮的背景放一张图片，让这张图片只显示一半，并将按钮固定，再当我们的鼠标移动到上面时将显示的一半隐藏，再将隐藏的一半显示。
4. 我们写完了简单的布局就开始写jQuery部分。
5. 
6. 我们先引入jQuery插件，然后再声明两个全局变量，scroll，time，将true赋值给变量scroll，而time先不给他赋值。
7. 我们再写一个滚动条事件window.οnscrοll=function () {}，然后再声明一个变量top，将滚动条距离上面的距离赋值给他var top = document.documentElement.scrollTop || document.body.scrollTop;
8. 再声明一个变量height，将元素返回的可见高度赋值给他var height = document.documentElement.clientHeight; clientHeight：返回元素的可见高度。
9. 用if语句来判断变量top是否大于变量height的值，如果大于就给button按钮设置样式为显示，否则将其隐藏。
10. 再用一个if语句判断一下变量scroll是否为false，如果是就将下面用到的定时器清除clearInterval(time);
11. 最后再让变量scroll的值赋值为false。
12. 我们再给button按钮绑定点击事件，将定时器赋值给变量time，我们用的是无限定时器，它里面有两个参数，一个是匿名函数，另一个是时间，我们先写第一个参数，里面我们声明一个变量top，和上面一样这个变量是获取滚动条垂直上方的距离的，然后我们用if语句判断一下变量top是否为0，如果是就清除这个定时器，并且返回，如果不是就来执行下面的代码。
13. 声明一个变量speed，我们将计算后的结果赋值给他，Math.floor(-top / 6);，这句代码表示将变量 top取负数再除于六，然后用Math对象里面的floor方法将其向下取整。
14. 我们设置匹配元素相对滚动条顶部的偏移，将变量top与变量speed的和赋值给他，最后再将变量scroll的值赋值为true。
15. 第二个参数我们设置为100毫秒，这表示每个100毫秒调用一下这个函数。
16. 效果如下：