今天更新一篇技术文章，主要是分享一段用于网页的返回顶部JS代码。希望通过这篇文章，让大家能够通过简单的代码添加，可以为你的网站增加一个返回顶部的按钮。另外，这段代码是在借鉴人人网的基础上修改完成，在此说明一下。
准备工作
最开始，我们要准备一个图片，用于返回顶部的按钮。我收集了一张，做个case举例。
JS代码部分
下面是js引用部分，直接粘贴到网页就可以了。
1:
HTML部分
1:
回到顶部
CSS部分
1: /* 返回顶部样式 */
2: #back-to-top{
3: position:fixed;
4: bottom:100px;
5: right:60px;
6: }
7: #back-to-top a{
8: text-align:center;
9: text-decoration:none;
10: color:#d1d1d1;
11: display:block;
12: width:80px;
13: /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/
14: -moz-transition:color 1s;
15: -webkit-transition:color 1s;
16: -o-transition:color 1s;
17: }
18: #back-to-top a:hover{
19: color:#979797;
20: }
21: #back-to-top a span{
22: background:#d1d1d1;
23: border-radius:6px;
24: display:block;
25: height:80px;
26: width:80px;
27: background:#d1d1d1 url(../images/arrow-up.png) no-repeat center center;
28: margin-bottom:5px;
29: -moz-transition:background 1s;
30: -webkit-transition:background 1s;
31: -o-transition:background 1s;
32: }
33: #back-to-top a:hover span{
34: background:#979797 url(../images/arrow-up.png) no-repeat center center;
35: }
把上面三部分代码加入之后就okay了，请注意返回顶部的图片路径在css中背景图片属性的表达是否正确。
就这样，一个轻量级的返回顶部功能就实现了