第一步,将下面的代码加到footer.php


<div id="shangxia">
	<div id="shang"></div>
	<?php if (is_single()) { ?><div id="comt"></div><?php } ?>
	<div id="xia"></div>
</div>

第二步,将下面的代码加到主题style.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;}

 

第三步,新建huadong.js文件,写入如下 JavaScript 代码:

 

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

 

最后一步,调用huadong.js文件

 

<script type=”text/javascript” src=”<?php echo TEMPLATEPATH.’/js/huadong.js’; ?>”></script>

 

当然了还得把导航图片上传到服务器上去。

本文来自 木木 ,木木老师最近因为主题的事很是受伤呀,现在又要闭关了,期待木木老师回归!