【WordPress】为主题添加直达顶部或底部功能

功能描述:鼠标移到上/下箭头,页面慢慢向上/下滑动,鼠标移开则停止;若点击则直接滑到页首/页尾。

核心源码来自http://kan.willin.org/?p=1333

不晓得有多少同学在用这个滑动导航的jQuery代码,在用的不妨再看看咯~

html代码+php判断,将下边这段代码加到header.php中,使得文章页才加载comt这个div:

1
2
3
4
5
<div id="shangxia">
    <div id="shang"></div>
    <?php if (is_single()) { ?><div id="comt"></div><?php } ?>
    <div id="xia"></div>
</div>

CSS相关代码,更改为fixed定位,不再兼容IE6,magin-right的400需根据你的网站宽度调整,背景图片也需要你自己添加了:

1
2
3
4
#shangxia{position:fixed;top:40%;right:50%;margin-right:-400px;display:block;}
#shang,#comt,#xia{background:url(images/huadong.png) no-repeat;position:relative;cursor:pointer;height:25px;width:29px;margin:10px 0 0;}
#comt{background-position:center -30px;height:32px;}
#xia{background-position:center -68px;}

jQuery代码,同样可以丢到header.php中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
jQuery(document).ready(function($){
$body=(window.opera)?(document.compatMode=="CSS1Compat"?$('html'):$('body')):$('html,body');//修复Opera滑动异常地,加过就不需要重复加了。
$('#shang').mouseover(function(){//鼠标移到id=shang元素上触发事件
        up();
    }).mouseout(function(){//鼠标移出事件
        clearTimeout(fq);
    }).click(function(){//点击事件
        $body.animate({scrollTop:0},400);//400毫秒滑动到顶部
});
$('#xia').mouseover(function(){
        dn();
    }).mouseout(function(){
        clearTimeout(fq);
    }).click(function(){
        $body.animate({scrollTop:$(document).height()},400);//直接取得页面高度,不再是手动指定页尾ID
});
$('#comt').click(function(){
    $body.animate({scrollTop:$('#comments').offset().top},400);//滑动到id=comments元素,遇到不规范的主题需调整
});
});
//下面部分放jQuery外围,几个数值不妨自行改变试试
function up(){
   $wd = $(window);
   $wd.scrollTop($wd.scrollTop() - 1);
   fq = setTimeout("up()", 50);
}
function dn(){
   $wd = $(window);
   $wd.scrollTop($wd.scrollTop() + 1);
   fq = setTimeout("dn()", 50);
}

本文来自:林木木