仿人人网动态样式返回顶部按钮

之前，在博文《WordPress博客添加返回顶部按钮教程》中提到了如何通过代码方式添加返回顶部按钮，它主要采用了一个图片作为锚点，鼠标停留在图片上没有提示效果，所以本篇博文则是在此方法上的升级，添加带动态提示效果返回顶部具体方法如下。

添加代码

进入WordPress 控制面板-“外观”-“编辑”，找到footer.php，在</body>之前添加以下代码：

找到style.css，在末尾添加以下代码：

#backtotop{
height:50px;
width:50px;
border-radius:4px;
float:left;
display:block;
background:#666 url(images/backtotop.png) no-repeat 0 -50px;
position:fixed;
zoom:1;
z-index:1001;
bottom:35px;
right:56px;
cursor:pointer;
}
#backtotop:hover{
background:#333 url(images/backtotop.png) no-repeat 0 0;
}

图片素材

这个图片上面带有“返回顶部”四个字的，但是其他部分多为透明所以看不到全貌，请直接另存为图片，放置到主题目录下的images文件夹下，保证实际路径和上述代码中一致即可。

该方法使用的是javascript的scroll函数，建立了一个带超链接的div容器在一定位置，通过css控制div容器的背景图片实现了鼠标悬停提示效果。