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

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

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

    2012.12.02

    DedeCMS二级菜单制作方法

    DedecmsDecks decks二级菜单…

  2. 没有图片

    2009.08.26

    DedeCMS中的 [field:imglink/] 图片大小自定义方法

    新版本的 DedeCMS 5.5 已经发布,…

  3. 没有图片

    2012.11.09

    Windows 8 MSDN 各版本下载地址大全

    今天想用Windows 8 的小朋友们不用东…

  4. 没有图片

    2013.12.31

    如何全新安装 OS X Mountain Lion

    刚刚介绍了如何制作 OS X Mountia…

  5. 2012.02.05

    2012新主题:Cimple V1.0正式发布

    你没进错地方,你现在看到的确实还是我的博客,…

  6. 没有图片

    2010.05.08

    将硬盘分区转换为NTFS格式的命令

    在 Windows 2K 以上版本的操作系统…

评论

  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浮动到顶部,也是按钮的方法