功能描述：鼠标移到上/下箭头，页面慢慢向上/下滑动，鼠标移开则停止；若点击则直接滑到页首/页尾。
代码来自：五个木
html代码+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;} |
图标素材可以用五个木同学的，点这里。当然也可以自己P个。
jQuery代码：
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);
} |
(完)
顶一下
(1)
100%
踩一下
(0)
0%
