给你的页面添加返回顶部按钮

大家应该都经历过,优秀的网页都会给人一个良好的浏览体验,比如一个较长的页面,看完之后想返回顶部,用鼠标滚轮是挺有效的方法,但如果我们为用户提供一个按钮,点击即返回顶部,不是更方便?本文与大家分享一下我的博客添加返回顶部按钮的过程,分享我的代码及使用的图片。

第一步、把以下代码添加到footer.php文件的</body>代码前:

你可以随意添加到想要添加的页面,因为我的博客所有的页面都会调用footer.php文件,这样这个返回顶部的按钮就在所有页面都可以显示了。

第二步、把以下样式文件复制到你的style.css文件里:

/*goto top*/
.gototop{
position:fixed;
bottom: 0;
right: 5%;
background-image:URL(images/gotop.png); width:48px; height:48px;
_position: absolute;
_top:expression(eval(document.compatMode &&document.compatMode=='CSS1Compat') ?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
}
.gototop A{ display:block;width:48px; height:48px;}
.gototop A:hover{background-image:URL(images/gotop2.png); width:48px; height:48px;}

第三步、把以下文件上传到你的主题文件的images文件里:

这样就完成了,是不是很简单?演示就看我的博客页面即可。

思章老师

认准了方向,就要勇敢地走下去,十年磨一剑,我相信,只要坚持,一切都有可能。

相关日志

  1. 没有图片

    2009.07.05

    WordPress 2.8 使用报告

    1. 更改密码的提示 安装后,首先发现新增了…

  2. 2014.11.05

    近来WordPress博客受漏洞攻击原因分析

    近来,很多基于WordPress建设的博客或…

  3. 没有图片

    2009.08.26

    UCenter Home 2.0 正式版 道具使用说明

    UCenter Home 2.0 正式版 发…

  4. 没有图片

    2010.09.18

    Internet Explorer 9 新特性

    Internet Explorer 9 新特…

  5. 没有图片

    2012.12.03

    网络自由与政治对决:谷歌反对联合国管理互联网

    谷歌中国的首页底部发布了一个名为“采取行动”…

  6. 没有图片

    2013.12.29

    Debian系统下用 vsftpd 配置FTP服务完整教程

    Debian系统下用vsftpd配置FTP服…

评论

  1. 学夫子 2011.04.05 1:36下午

    嘿嘿我也有一个,找别人帮我做的

    • 李思章 2011.04.06 7:30上午

      嗯,看到了,你的是贴在右边的。没我的好看。

  2. Louis Han 2011.04.04 6:43下午

    嗯嗯 我的主题自带了这个功能

    • 李思章 2011.04.06 7:28上午

      其实可以演绎一下,把这个升级成回到首部和底部的按钮。

    • 李思章 2011.04.06 7:33上午

      你那个不算的。只有到页面最底部才看得到。

  3. 许岑 2011.04.04 5:43下午

    能有个向上的文字提示,可能用户体验更好些

    • 李思章 2011.04.04 6:09下午

      我改了一下图片,现在应该差不多了。谢谢建议。