用jQuery实现WordPress侧边上下滚动导航条效果

2019独角兽企业重金招聘Python工程师标准>>>

转自：http://down.chinaz.com/try/201202/1634_1.htm

用jQuery实现WordPress侧边上下滚动导航条效果，此方法不是很智能没有添加PHP判断，纯手手工添加和修改的。具体实现方法如下：

1、下载jQuery-up-down.zip，解压后把里边的图片上传到网站主题模板的images文件夹中。

2、在当前主题模板的CSS文件中添加如下代码：

/* 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、在 主题模板的 顶部 (header.php) 文件的 head 部分添加如下代码：

<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、做好之前的几步以后就是在对应该的地方添加调用。

　　要在这些主题模板文件中添加对应该的调用代码(随便什么位置都可以添加)，分别是：

　　首页模板 (index.php)文件中添加

<!-- 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 -->

　　首先确保你的页面已经加载 jQuery Javascript 库 如果没有可以在header.php模板文件 head 部分添加：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

　　OK，大功告成，效果如下：

转载于:https://my.oschina.net/shunshun/blog/100029