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

之前,在博文《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;
}

图片素材

home

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

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