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

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

第一步、把以下代码添加到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. 没有图片

    2013.12.23

    使用Windows 8.1之系统镜像功能备份恢复系统教程

    新的Windows 8.1系统确实很给力,很…

  2. 没有图片

    2012.07.14

    PHP的mail函数无法发送邮件的解决办法

    服务器安装上了centos,但默认不能发送邮…

  3. 没有图片

    2009.07.26

    SEO到底给我们带来什么?

    近来一个博友通过QQ与我在SEO对网站到底有…

  4. 2011.10.22

    WordPress仿古书中文直排主题 VerTick

    今天帮朋友找书法类的WordPress主题,…

  5. 没有图片

    2009.10.09

    层与关键帧 -菠萝AE学习笔记

    实验项目 AE快速入门 实验目的 掌握视频处…

  6. 没有图片

    2009.10.19

    WordPress评论嵌套下课 -悬浮显示评论菜鸟教程

    可以说目前网上很热门而且受关注的Wordpr…

评论

  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下午

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