网页的「回到首部」功能

最近在做公司一个内部需求的时候，需要给一些比较长的网页做一个固定在右下角的「回到首部」按钮。

嗯，就像那个样子。那个是人人网的。它固定在页面的右下角，在页面滚动之后显示，并且有着把页面从任何地方 「回到首部」的功能。

从直觉上，我觉得这么先进的玩意儿应该是html+css+js协同工作来完成。我从来没接触过css，哦，不对，也算接触过，去尝试着改过对话框的大小。那时候还不知道元素的id是什么。只知道尝试。不过这次我决定先用搜索解决需求再说。

搜了好多个，最后还是搜索到了这里。
按照这篇博客的指引，我在模板的</body>之前加入了
这样的html：

 

<div id="toolBackTop">
<a title="返回顶部" onclick="window.scrollTo(0,0);return false;" href="#top" >
返回顶部</a>
</div>

这样的js:

<script src="js/jquery.min.js" ></script>
<script >
$(document).ready(function () {
var bt = $('#toolBackTop');
var sw = $(document.body)[0].clientWidth;

var limitsw = (sw - 840) / 2 - 80;
if (limitsw > 0){
limitsw = parseInt(limitsw);
bt.css("right",limitsw);
}

$(window).scroll(function() {
var st = $(window).scrollTop();
if(st > 30){
bt.show();
}else{
bt.hide();
}
});
})
</script>
并且新建了一个css文件，在里面写入了

a {
color: #3354aa;
text-decoration: none;
border-bottom: 0px;
border-left: 0px;
padding-bottom: 0px;
margin: 0px;
outline-style: none;
outline-color: invert;
padding-left: 0px;
outline-width: 0px;
padding-right: 0px;
background: none transparent scroll repeat 0% 0%;
font-size: 100%;
vertical-align: baseline;
border-top: 0px;
border-right: 0px;
padding-top: 0px
}
a: hover {
border-bottom: medium none;
color: #444
}
.back-to {
z-index: 999;
position: fixed;
width: 110px;
bottom: 35px;
overflow: hidden;
right: 10px
}
.back-to .back-top {
text-indent: -9999em;
outline-style: none;
outline-color: invert;
outline-width: 0px;
width: 50px;
display: block;
background: url("/site_media/image/back-top.png") no-repeat 0px 0px;
float: right;
height: 50px;
margin-left: 10px
}
.back-to .back-top: hover {
background-position: -50px 0px
}

问题解决。不过看来我需要学习一些css和js的常识了。