其实这篇文章是从木木那里借鉴过来的，也可以说是完全翻版过来的，呵呵，但是记得好像有朋友问过，那今天就来写一下教程吧。

效果图就不发了，大家可以看见我博客左边的三个滑动按钮，第一个是返回顶部，第二个是来到评论，最后一个是去到底部。当然，首页就只有返回顶部和底部。罗嗦了这么多，咱们开始折腾。

首先呢，得有这三张小图片，不用急，Nox会把下载地址给大家的。

下面在index.php文件下，加入以下代码：

<div id="shangxia" ><div id="shang"></div><div id="xia" ></div></div>

（这里是让首页只显示上下滑动按钮。）

然后在把下面的代码加入到single.php文件里：

<div id="shangxia"><div id="shang"></div><div id="comt"></div><div id="xia"></div></div>

（这里是阅读文章的时候，三个按钮都显示。）

下面新建一个名为shangxia.js的JS文件，复制下面的代码，然后保存上传到当前使用的主题目录里。

jQuery(document).ready(function($){
    $('#shang').click(function(){
    $('html,body').animate({scrollTop: '0px'}, 800);
    });
    //点击id="shang"对象时，滑动至相对浏览器滚动条为0px（即顶部），时间为800毫秒
    $('#comt').click(function(){$('html,body').animate({
    scrollTop:$('#comments').offset().top}, 800);
    });
    //点击id="comt"对象时，滑动至id="comment"相对浏览器滚动条的距离，时间为800毫秒
    $('#xia').click(function(){$('html,body').animate({
    scrollTop:$('#footer1').offset().top}, 800);
    });
});

在然后，在CSS文件里，添加以下代码：

#shangxia{position:fixed;top:40%;left:50%;margin-left:-520px;display:block;}
/* 使用fixed使id=“shangxia”的对象固定于浏览器中，相对的上距离为40%，左距离为50%（即居中），然后向左移动520px（需自行调整！！！） */
#shang{background:url(images/shang.gif) no-repeat;position:relative;cursor:pointer;height:32px;width:32px;margin:10px 0;}
#xia{background:url(images/xia.gif) no-repeat;position:relative;cursor:pointer;height:32px;width:32px;margin:10px 0;}
#comt{background:url(images/comt.gif) no-repeat;position:relative;cursor:pointer;height:32px;width:32px;margin:10px 0;}

然后在header.php页面加载jQuery，如果你以前加载过，就可以跳过这一步了。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

最后一步，在header.php页面(也就是上面的代码下面）加载刚刚创建的JS文件，顺序一定不能颠倒，一定要在jQuery库后面加载。

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/shangxia.js"></script>

到这里就全部完工了，呵呵，大家去试试，效果不错，用起来很也方便，特别是评论很多，而且不翻页显示的博客，例如小邪，619的博客，就是评论不翻页。

好了，有什么问题，可以给Nox留言哦，Nox一定会及时的回复。

对了，还有三张图片的下载地址：点我去下载 （把图片上传到当前使用主题的images文件夹内。）