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

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

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

    2011.04.03

    网页设计用到的漂亮字体.备用(更新)

    因为折腾主题和设计网页一直需要与字体打交道,…

  2. 没有图片

    2009.08.31

    UCenter Home access denied for agent changed 错误解决办法

    UCenter Home 2.0 正式版 出…

  3. 没有图片

    2011.09.14

    几行代码让你的WordPress页面添加摘要功能

    WordPress 在发布日志的时候,会有摘…

  4. 没有图片

    2009.07.08

    WordPress兄弟代码BBPress论坛发布

    BBPress论坛是Wordpress博客系…

  5. 没有图片

    2009.07.05

    WordPress 2.8 兼容的风格列表

    随着Wordpress 2.8版本的发布,很…

  6. 没有图片

    2015.01.05

    谷歌字体本地化CDN加速教程

    Google被墙是大家都知道的,痛哭流涕也没…

评论

  1. Jeaturing 2011.04.18 5:47上午

    好利害,很好,比用插件强

  2. Jessy 2011.04.06 6:24上午

    好,用你这个吧,我的文字给退休了

    • 李思章 2011.04.06 7:30上午

      哈哈,纯文字的哪有这么好的效果。

      • Jessy 2011.04.06 8:54上午

        呵呵,是啊,又写到以前的网址了,我晕,是不是考虑给它添加ajax效果浮动到顶部啊,现在可是和文字效果一样,不过美观了许多,看他们很多人用ajax浮动到顶部,也是按钮的方法