博客没有分页功能，也没有必要整个分页功能，因为大部份人看博客喜欢很短很短的文章，偶尔来哪么一篇又臭又长的博文，这么问题就来了，向上向下拖动网页很是费事。今天要实现的就是在页面左侧添加一个通过点击可以起到导航作用的小功能，使网站变的更加人性化在园子博客看到篇利用jquery实现的上下滑动很酷，遂搬了过来。以防忘记，做一个笔记。
先来看看效果。
WordPress 中使用 jQuery实现向上向下滑动
导航功能实现过程
1.在你主题文件 footer.php 中添加如下代码：
1 | <div id="shangxia"><div id="shang"></div><div id="comt"></div><div id="xia"></div></div> |
注意要加在 body 结束标签之前。
2.在主题文件 style.css 中加以下样式：
1 2 3 4 | #shangxia{position:absolute;top:40%;left:50%;margin-left:-535px;display:block;} #shang{background:url(img/huadong.gif) no-repeat;position:relative;cursor:pointer;height:42px;width:32px;margin:10px 0;} #comt{background:url(img/huadong.gif) no-repeat center -45px;position:relative;cursor:pointer;height:32px;width:32px;margin:10px 0;} #xia{background:url(img/huadong.gif) no-repeat center -78px;position:relative;cursor:pointer;height:42px;width:32px;margin:10px 0;} |
提示：样式中的 margin-left:-535px;需要根据自己网站的显示效果自行调试，负值越大越靠近左侧屏幕边缘。
3.通过 jQuery 实现点击相应图标后，定位到相应的位置。
不会使用 jQuery 的朋友请看这里在WordPress 加载 jQuery
所用到的 jQuery 代码如下：
1 2 3 | $('#shang').click(function(){$body.animate({scrollTop: '0px'}, 400);}); $('#xia').click(function(){$body.animate({scrollTop:$('#footer').offset().top}, 800);}); $('#comt').click(function(){$body.animate({scrollTop:$('#comments').offset().top}, 800);}); |
4.使用 jQuery 实现滑动效果
建议建立一个js文件在主题中调用，连同第三步中提到的代码加入到js文件中即可。现在总的js文件代码如下：
1 2 3 4 5 6 7 | jQuery(document).ready(function($){ var s= $('#shangxia').offset().top;$(window).scroll(function (){$("#shangxia").animate({top : $(window).scrollTop() + s + "px" },{queue:false,duration:500});}); $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body'); $('#shang').click(function(){$body.animate({scrollTop: '0px'}, 400);}); $('#xia').click(function(){$body.animate({scrollTop:$('#footer').offset().top}, 800);}); $('#comt').click(function(){$body.animate({scrollTop:$('#comments').offset().top}, 800);}); }); |
5.调用所需js文件
在主题中调用第四步建立的 .js 文件，假设你建立的文件名为 all.js，那么直接在主题文件 header.php 中的 head 区域添加如下样式代码即可：
1 | <script src="http://www.yourdomain/all.js" type="text/javascript"></script> |
现在效果基本就有了,但是首页还有”评论”功能,显然也不太合适,解决这个办法,你可以把你的CSS复制二份,首页的哪份删除
1 | #comt{background:url(img/huadong.gif) no-repeat center -45px;position:relative;cursor:pointer;height:32px;width:32px;margin:10px 0;} |
这一句.
其它的页面加载完整的CSS.
比如我的CSS是style.css.php(这个是删除了”评论”语句的)而wupreplaystyle.css.php就是所有单页面的CSS(有”评论”语句的)
我们只需要在在我们的header.php里加上这样的语句,当然之前加载的CCS语句要删除.
1 2 3 4 5 | <?php if (is_single()) { ?> <link rel="stylesheet" href="http://www.yesure.net/wp-content/themes/BlueGrey/wupreplaystyle.css.php" type="text/css" media="screen" /> <?php } else { ?> <link rel="stylesheet" href="http://www.yesure.net/wp-content/themes/BlueGrey/style.css.php" type="text/css" media="screen" /> <?php } ?> |
PS:如果需要图片素材的话你可以另存为这个图片到PS里更改即可.
百度到这，用上了。
看上面的广告很给力，点点更健康。。另外学会了一些东西，在你的这里，，
@青年怪客 有用就好,你别客气哦
我刚刚按照你这篇文章的方法安装了这个代码，这个返回顶部的图片倒是显示出来了，但就是不滑动，不知道是哪里没弄好。
@番茄 JQ没有加载成功吧
Pingback: WordPress利用jQuery实现向上向下滑动 | Qiusheng Wu's Blog
这个有用，做个记号 ，回头加到主题里去~！
我那只能上不能下不知道是咋回事
Pingback: wordpress利用jquery实现页面载入效果 — YESURE技术博客
这个不得不顶，博主有心了！
效果很强烈 呵呵
短而精好
技术性很强
@zwwooooo 没错，木木哪里没有园的详细，园子哪里也引用了说是木木的
这个貌似是木木木木的
@晓力博客 留言必访去您哪里看看
@北街 这样的好处是,第一自己用过的东西肯定知道好坏,在自己的站里找不怕以后找不到,第二也能给别人一点帮忙,未必所有的人都是熟手是吧.
这个不错，很实用，效果不错！
多来看看啊
我也喜欢把博客实现的功能都记下来~呵呵