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

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

具体效果与游子网络左边栏演示的一样!

评论

  1. 10年前
    2012-10-02 0:01:17

    博主,为什么我的按钮没有用?点击没反应!而且首页还出现了评论的图标!

    • 博主
      fjutwangbin
      10年前
      2012-10-08 9:44:46

      检查一下是不是有JS冲突,不可能不能用的。jquery只需要加载一次,不需要重复加载。

  2. 10年前
    2012-2-14 11:25:11

    代码啊。。。看着头痛。。

    • 博主
      洋洋
      10年前
      2012-2-14 20:41:23

      习惯就好

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇