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

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

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

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]

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

点赞
  1. 5不出来 says:

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

  2. 野人部落 says:

    不错。顶一个。

  3. WingSun says:

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

    1. 叶子 says:

      只在这篇文章内失效。

  4. 霖风 says:

    怎么能改变样式呢?

  5. sir says:

    试过,不行。

  6. Royliet says:

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

  7. babailne says:

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

  8. Tming says:

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

  9. .﹎.Ykヤ says:

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

  10. 昭通SEO says:

    学了一招,备用!

  11. 小八 says:

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

  12. 老宋 says:

    不会弄 弄了了半天 没成功

  13. dianaluna says:

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

    1. 叶子 says:

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

  14. 拉拉 says:

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

    1. 叶子 says:

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

      1. 晴天 says:

        怎么调用呢?

      2. 晴天 says:

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

  15. 林木木 says:

    博主应该注明一句吧?

    1. 叶子 says:

      欢迎光临!

  16. ttdo says:

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

    1. 叶子 says:

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

      1. ttdo says:

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

        1. 叶子 says:

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

          1. ttdo says:

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

          2. ttdo says:

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

  17. general says:

    我的怎么实现不了啊?

    1. 叶子 says:

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

  18. general says:

    好东西啊!谢谢啊!

  19. xibeiwolf says:

    这篇文章我喜欢!

  20. kaka says:

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

    1. 叶子 says:

      我也喜欢……

  21. Kada says:

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

  22. 秦大少 says:

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

  23. 向晚 says:

    周末去折腾下。

    1. 电脑知识与技术 says:

      非常不错。学习了

    2. liveme says:

      IE6下某些CSS属性不兼容。

      1. 叶子 says:

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

    3. 兔拉鱼 says:

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

    4. 大逆不道 says:

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

      1. 叶子 says:

        第2布style.css中第一行就是定义按钮位置的。

  24. 等待思索 says:

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

    1. 叶子 says:

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

  25. 八五学社 says:

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

  26. 小黎的IT博客 says:

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

  27. 学夫子 says:

    这个只能用在wp里么?

    1. 叶子 says:

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

  28. FOOLPOOR says:

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

    1. 叶子 says:

      加载jQuery库是前提

  29. FOOLPOOR says:

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

    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

  30. 睿智小超人 says:

    留名,将来可能用得上

  31. 老实人博客 says:

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

  32. 包子 says:

    jq是个好东西

  33. yesureadmin says:

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

Leave a Reply

Your email address will not be published. Required fields are marked *