第一步，将下面的代码加到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>

 

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

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