仿人人网动态样式返回顶部按钮
之前,在博文《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容器的背景图片实现了鼠标悬停提示效果。