WordPress ·

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

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

添加代码

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

找到style.css,在末尾添加以下代码:

图片素材

home

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

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

参与评论