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

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

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

html代码+php判断,文章页才加载comt这个div:

<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需调整:

#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;}

注:此图标确为小弟PS,若你集成在主题中发布我会当作是你重新PS的,跟我无关。可如果真直接拿去用的还发布还说是自己PS的,我将从内心深处深深得膜拜你~

jQuery代码:

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.增加点击评论头像快捷回复他,原来双击某条评论快捷回复仍旧保留;

2.留言时间默认隐藏,而且只输出主评论的时间;