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

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

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

    2010.12.23

    免费顶级域名注册推荐 dot.tk

    估计很多朋友特别是新站长肯定想不花钱注册域名…

  2. 没有图片

    2014.12.22

    Debian Nginx 如何添加虚拟主机

    这段时间折腾阿里云,开始是用CentOS加固…

  3. 没有图片

    2010.06.18

    WordPress 3.0正式版发布 菠萝筐第一时间升级

    WordPress 3.0正式版发布了,今天…

  4. 没有图片

    2010.01.30

    30个精选的CSS技术和实例

    1.Hoverbox 图片集 一个纯净的基于…

  5. 没有图片

    2009.07.20

    织梦系统Dedecms 5.5测试版发布

    DedeCMS V5.5已经修正或升级的功能…

  6. 没有图片

    2010.03.17

    三个可以托管上Twitter的源码:Twitese,Rabr,Dabr

    Twitter已经是墙外之特,我们只能望墙兴…

评论

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

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