更简单的返回顶部代码

当然，这种代码就没有使用脚本，脚本的作用几乎就是用来检测页面高度然后显示或隐藏返回顶部图标 并且控制滚动速度的。

其实让返回顶部图标一直显示着也没什么大碍。

最简单的就是采用 Html+CSS ，到目前为止，我也基本会了，而且本篇主要是记录 background-positon 这个图片坐标定位属性的。

用于鼠标悬停在返回顶部图标时，显示另一个图标，这样可以让图标动感一些。

首先是加入一个返回顶部的div，给它一个id

<div id="roll"><a href="javascript:scroll(0,0)"><div title="返回顶部" id="roll_top"></div></a></div>

其中 javascript:scroll(0,0) 是定位顶部的脚本代码，类似于使用 #top。

接下来就是CSS ，

#roll_top{position:relative;z-index:1;width:48px;height:72px;cursor:pointer}
#roll_top{background:url(images/gototop.png) no-repeat;background-position: -48px 0px;}
#roll_top:hover{background:url(images/gototop.png) no-repeat;background-position: 0px 0px;}
#roll{position:fixed;top:auto;right:10px;bottom:5px;display:block}

主要是其中的 background:url(images/gototop.png) no-repeat;background-position: -48px 0px;

gototop.png 如上图所示 它的宽×高为：96×72 ，那么先取它面积的一半作为显示出来的部分，

也就是上面的 width:48px;height:72px;  然后再用定位background-position属性，定位点以左上角为基准固定（0,0），

-48px 表示图片本身向左侧移动48px，0px表示图片本身上或下移动0px 。

而悬停hover属性，已经自然定位好了，不需要移动。

如此基本上CSS也搞定了。