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

核心源码来自：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.留言时间默认隐藏，而且只输出主评论的时间；

原文链接：http://immmmm.com/sliding-navigation-final-version.html