在WordPress中用jQuery实现平滑返回顶部

新换了个好复杂的WP主,后台设置一遍就花了我3个小时,悲催的,还没设置完。看到别人博客里面,都有悬浮返回顶部的小按钮,至少在footer里面也有一个,可是新换的这个主题里面竟然没有这个功能,无奈只好去网上溜达着寻找。

找到了一些用jQuery的,因为WP自带一个jQuery库,而且主题也引用了这个库文件,也就没有多想,随手把返回顶部的功能放到主题里面,可是不管我怎么修改都不能用。后来,保存成本地文件,引用Google的jQuery库试了下,结果是可以实现的。在网上也找了下原因,说是WP自带的是阉割版,还有某个函数xxxxxx的原因,太专业,咱也不懂,咱只知道把Google的jQuery下载下来,上传到自己的服务器里面,覆盖原来的jQuery文件,再试了之后就可以了,这该死的WP。

言归正传,代码来自immmmmm.com,就连图片我也给copy过来了,嘿嘿。在主题里面随便找个地方把下面的复制进去,我放到了footer里面。

注意
Js中#comments和#cred分别为评论和footer的id名,请自行修改

在CSS里面加上下面的几句话,我放到了style.css的最下面。

把下面的图片放到主题文件夹下面的images文件夹里面,当然,你也可以放你喜欢的图片。

大功告成。


闲来无事,做了点小修改。因为他无法判断页面上是否含有评论,immmmmm里面有个文章是通过php函数判断当前页面的性质,如下所示。

个人感觉不是很理想,就采用jQuery判断是否含有class名为comments的h3标签,进行相应的输出。代码如下,CSS部分无需修改。

您可能还喜欢...

2 条回复

  1. 小凡说道:

    问下,怎么看footer的id,您看下我的主题貌似有问题

  2. yywr说道:

    好神奇的主题,其实像我用默认主题多好,干净,想到什么就加点什么,慢慢折腾

回复 yywr 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据