为WordPress添加“返回顶部”的导航按钮

2010年9月10日 8741点热度 0人点赞 55条评论

细心的朋友应该会看到在本站的首页文章列表(内页的文章主体)和侧边栏之间的夹缝中有三个按钮,分别代表向上到顶部、定位到评论部分、向下到页底,给读者提供了一定的便利,对优化用户体验是很好的。今天优化了已下,就是在首页隐藏评论按钮,因为首页没有评论,无法定位,显示也是多余的,所以加上判断语句,在首页就只显示上下两个箭头了。恰好朋友问起是如何实现这个个性化功能的,于是写篇文章总结一下,以供朋友们查阅。

其实很简单,基本上只需三步:

1.在头文件中加入按钮元素

在头部文件header.php中加入如下代码:
[sourcecode language='php']


[/sourcecode]
简单释义:shangxia的div标签中包含三个div标签:shang(向上)、comt(评论)、xia(向下),判断语句的作用是当在首页时只显示shang和xia两个标签(具体显示效果参见本站)

2.在主题css中加入以上标签的定位和样式

在主题的style.css文件中加入已下代码:
[sourcecode language='php']
#shangxia{position:fixed;top:40%;left:50%;margin-left:-520px;display:block;}
#shang{background:url(images/shang.gif) no-repeat;position:relative;cursor:pointer;height:32px;width:32px;margin:10px 0;}
#xia{background:url(images/xia.gif) no-repeat;position:relative;cursor:pointer;height:32px;width:32px;margin:10px 0;}
#comt{background:url(images/comt.gif) no-repeat;position:relative;cursor:pointer;height:32px;width:32px;margin:10px 0;}
[/sourcecode]
简单释义:第一行中定位了按钮出现的位置,大家可以参考自己的博客主题做相应微调;后三行中设定了三个按钮的样式,请大家自己搜集素材,别忘了上传到服务器相应位置。

3.在js文件中添加jQuery滑动效果

在主题的js文件(一般在js文件内,扩展名师.js的文件,可以查看头文件中是否调用了这个js文件)打开加入已下代码:
[sourcecode language='php']
$('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});
$('#comt').click(function(){$('html,body').animate({scrollTop:$('#comments').offset().top}, 800);});
$('#xia').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);});
[/sourcecode]

至此全部完成!祝你好运,遇到问题可以在本文留言。

叶子

喵咪的样子,小白兔的心……

文章评论

  • 5不出来

    我用的是热点新闻主题 已经集成这个功能,不过我想换换图标,但是不会

    2012年4月24日
  • 野人部落

    不错。顶一个。

    2012年4月15日
  • WingSun

    你的回到顶部 底部都点了没反应,只有滑动可以实现,赶紧看看吧

    2012年1月11日
    • 叶子

      @WingSun 只在这篇文章内失效。

      2012年1月12日
  • 霖风

    怎么能改变样式呢?

    2011年11月11日
  • sir

    试过,不行。

    2011年10月30日
  • Royliet

    为什么都添加了还是没有效果呢?
    博主可以教我一下吗?QQ:674551844
    多谢博主!!!

    2011年9月25日
  • babailne

    博主那个图标在哪里下载啊?

    2011年8月31日
  • Tming

    您好 我想知道你的QQ号吗,不知道您可不可以告诉我一下,我有问题向您求教。谢谢啦~~~

    2011年8月31日
  • .﹎.Ykヤ

    请问CSS中的三个素材是要自己找吗?在哪里有找呢 我是新手刚建blog~
    还有我的主题下没有JS文件夹哦,默认主题下才有

    2011年8月3日
  • 昭通SEO

    学了一招,备用!

    2011年6月27日
  • 小八

    找了半天没找到所谓的JS文件
    看来是主题不支持吧!!

    2011年5月13日
  • 老宋

    不会弄 弄了了半天 没成功

    2011年2月6日
  • dianaluna

    我用的是Inove主题。
    header文件有两个,/themes/inove/templates/下的header.php和/themes/inove/下的
    Js文件有三个,base.js,comment.js,menu.js
    请问我应该修改哪个?谢谢

    2010年12月20日
    • 叶子

      @dianaluna 我去您的站点看过了,您的主题header文件应该在/themes/inove/下,您看一下这个文件里是否都引用了三个js文件,您可以挑一个被引用的js文件添加相关代码。

      2011年3月8日
  • 拉拉

    js文件在哪里,没有发现有js后缀的文件。怎么办

    2010年11月21日
    • 叶子

      @拉拉 在主题文件夹里找,除非你用的主题不需要js,实在没有自己加一个总可以吧

      2010年11月21日
      • 晴天

        @叶子 怎么调用呢?

        2011年7月25日
      • 晴天

        @叶子 我的主题不需要js的情况下,应该怎么弄?能不能具体给我 讲一下呢?谢谢你!

        2011年7月25日
  • 林木木

    博主应该注明一句吧?

    2010年10月29日
    • 叶子

      @林木木 欢迎光临!

      2010年10月29日
  • ttdo

    博主你好,我按着你说的方法去做了,按钮什么的都加上了就是在点击的时候没反应不返回顶部或者底部!可能问题出现在第三部,我不知道第三部应该具体插入到那,我就把主题下的js文件全插上了,还是不行,是不是有主题限制啊,我用的灰太狼那的情侣的主题!

    2010年10月26日
    • 叶子

      @ttdo 请将你使用主题头部文件发到我邮箱,lizypen@foxmail.com

      2010年10月26日
      • ttdo

        @叶子 你好,我给你发过去了我是来补充下问题的,现在返回头部,和评论已经好用了,就差返货底部了,点击它还是回到顶部!效果你可以直接看的博客!

        2010年10月26日
        • 叶子

          @ttdo 看一下你的效果,你使用的代码肯定和我文章发布的不一样,所以我没把我能帮你解决问题

          2010年10月26日
          • ttdo

            @叶子 感谢博主的帮助和讲解,恩 你说的对,是我的主题问题换个主题就好了,呵呵!在此谢过!

            2010年10月26日
          • ttdo

            @叶子 呵呵问题彻底解决,是的主题 底部 #footer 的事情默认的应该是“#”谁知道作者用的是个“.”找了好久才发现的,别的不多说 一个字 谢!

            2010年10月26日
  • general

    我的怎么实现不了啊?

    2010年10月20日
    • 叶子

      @general 浩浩研究研究吧,祝你成功!

      2010年10月20日
  • general

    好东西啊!谢谢啊!

    2010年10月20日
  • xibeiwolf

    这篇文章我喜欢!

    2010年10月18日
  • kaka

    我喜欢这种带缓冲样式的~~

    2010年9月27日
    • 叶子

      @kaka 我也喜欢……

      2010年9月30日
  • Kada

    前两天觉得这样太麻烦了。换了一个插件,好像叫做dymantic scrool.

    2010年9月17日
  • 秦大少

    我的不太习惯使用这个按钮,一般还是觉得滚鼠标滚轮比较顺手。

    2010年9月16日
  • 向晚

    周末去折腾下。

    2010年9月16日
    • 电脑知识与技术

      @向晚 非常不错。学习了

      2011年1月12日
    • liveme

      @向晚 IE6下某些CSS属性不兼容。

      2011年3月7日
      • 叶子

        @liveme 就算ie6起死回生了也终究离死不远了。如果有来本站的访客使用ie6,本人严正声明:如果您钟爱ie,目前官方正式版已经是ie8了,敬请升级!

        2011年3月8日
    • 兔拉鱼

      @向晚 有没有这中插件的,对于我这样的喜人不知道怎么样啊。

      2011年3月7日
    • 大逆不道

      @向晚 怎样改变 导航按钮位置;
      把它放到内容栏和侧边栏中间应该怎么做。

      2011年3月9日
      • 叶子

        @大逆不道 第2布style.css中第一行就是定义按钮位置的。

        2011年3月10日
  • 等待思索

    不知道我这款博客程序能用么?我的是micolog的

    2010年9月16日
    • 叶子

      @等待思索 虽然对GAE没有太多的了解,但是感觉应该不能直接使用,因为上面是基于php的,而micolog使用的是python语言,不过因该可以移植,你可以做一下这方面的研究

      2010年9月16日
  • 八五学社

    我的主题里面有了,谢谢分享

    2010年9月15日
  • 小黎的IT博客

    叶子大哥 我仿了个主题,去看看 ,帮我提提意见

    2010年9月15日
  • 学夫子

    这个只能用在wp里么?

    2010年9月14日
    • 叶子

      @学夫子 不是,这个没有wp函数的参与,纯php+js,我觉得可以在php程序中通用

      2010年9月14日
  • FOOLPOOR

    代码不能显示
    参考http://immmmm.com/how-to-use-jquery-code.html

    2010年9月13日
    • 叶子

      @FOOLPOOR 加载jQuery库是前提

      2010年9月13日
  • FOOLPOOR

    图片已经出来,能根据页面上下移动,但点击后无反应。

    3步都进行了,1、2步没问题。
    第三步主题js文件夹内有3个文件,分别为,menu.js、pngfix.js、tabs.js。
    header.php文件中调用前两个文件,但修改后无出错信息但也无效果。
    在主题的js文件/includes/js/tabs.js添加后左下角叹号显示页面出错。
    网页错误详细信息:

    消息: 对象不支持此属性或方法
    行: 27
    字符: 1
    代码: 0
    URI: http://www.xxxxxxx.com/wp-content/themes/busybee20/includes/js/tabs.js?ver=2.9.2

    2010年9月13日
  • 睿智小超人

    留名,将来可能用得上

    2010年9月12日
  • 老实人博客

    应该加的。我的每篇文章里面都加了。这样方便访问者,同时也方便搜索引擎。

    2010年9月12日
  • 包子

    jq是个好东西

    2010年9月12日
  • yesureadmin

    这个不错,多数人都玩了,我来抄一下,看能否成功

    2010年9月11日