以下是网学网为您推荐的网络知识-用jQuery实现WordPress侧边上下滚动导航条效果，希望本篇文章对您学习有所帮助。

　　用/* shangxia */
#shangxia{position:fixed;top:40%;left:50%;margin-left:-520px;display:block;}
/* 使用fixed使id="shangxia"的对象固定于浏览器中，相对的上距离为40%，左距离为50%（即居中），然后向左移动520px（需自行调整！！！） */
#shang{background:url(images/shang.png) no-repeat;position:relative;cursor:pointer;height:48px;width:48px;margin:10px 0;}
#xia{background:url(images/xia.png) no-repeat;position:relative;cursor:pointer;height:48px;width:48px;margin:10px 0;}
#comt{background:url(images/comt.png) no-repeat;position:relative;cursor:pointer;height:48px;width:48px;margin:10px 0;}

3、在

<script type="text/javascript" >
jQuery(document).ready(function($){
$(''#shang'').click(function(){$(''html,body'').animate({scrollTop: ''0px''}, 800);}); //time:800ms
$(''#comt'').click(function(){$(''html,body'').animate({scrollTop:$(''#respond'').offset().top}, 800);}); //time:800ms
$(''#xia'').click(function(){$(''html,body'').animate({scrollTop:$(''#footer'').offset().top}, 800);});});
</script>

4、做好之前的几步以后就是在对应该的地方添加调用。

　　要在这些

<!-- shangxia begin -->
<div id="shangxia"><div id="shang"></div><div id="xia"></div></div>
<!-- shangxia end -->

　　文章归档 (archive.php)文件中添加

<!-- shangxia begin -->
<div id="shangxia"><div id="shang"></div><div id="xia"></div></div>
<!-- shangxia end -->

　　页面模板 (page.php)文件中添加

<!-- shangxia begin -->
<div id="shangxia"><div id="shang"></div><div id="xia"></div></div>
<!-- shangxia end -->

　　文章页面 (single.php)文件中添加

<!-- shangxia begin -->
<div id="shangxia"><div id="shang"></div><div id="comt"></div><div id="xia"></div></div>
<!-- shangxia end -->

　　首先确保你的页面已经加载

<script type="text/javascript" src="/uploadfile/201407/4/D7115632696.png" />
Wordpress下载：
WordPress v3.5.2 简体中文版下载
界面预览
软件语言：简体中文
运行环境：PHP/Mysql
软件授权：免费版
更新时间：2013-7-24 16:05:30
相关链接：Home Page
WordPress  v3.9 英文版下载
界面预览
软件语言：英文
运行环境：PHP/MySQL
软件授权：开源软件
更新时间：2014-4-17 9:56:31
相关链接：Home Page
本文转自：http://www.yziw.net/archives/2272.html