看到有些博友的页面上有个上下滑动箭头，无论页面滚动到哪，点一下上或者下就会直接回到页面最顶部或者最底部，很是方便，并且箭头还能跟随页面的滚动，效果很好。于是我研究了半天，又上网找了半天，终于也弄了一个，把过程写在下面备忘吧。

首先这个滑动效果要用到jquery，本来我用的主题是林木木童鞋的simplelines主题，很简洁漂亮的主题，没有加载任何的js脚本，我在犹豫要不要破了这个例，给博客加上jquery，想来想去，还是加上吧，谁让咱是爱折腾的人呢。

加载jquery有两种方法，一种是直接加载wordpress自带的jquery库，1.4.4版本的，直接在前加上

就可以了，需要注意的是，以后写的js代码一定要写在这句话之后才行，否则jquery库还没加载完就执行脚本的话会出错的。个人推荐把需要的js脚本写到一个js文件里，在主题foot.php文件的body标签以前加载

这样会加快网页的载入速度，更好的提升用户体验。还有一种加载jquery库的方法就是加载google或者microsoft的jquery库，也很简单

这样jquery库就加载好了，下面我们需要在foot.php文件的body标签之前加上

这就是我们的上下箭头的html代码了，下面我们在主题的css样式里加上箭头的样式

#shangxia{position:absolute;top:40%;left:8%;display:block;font-size:42px;color:#777;}
#shang{position:relative;cursor:pointer;height:42px;width:42px;margin:10px 0;}
#xia{position:relative;cursor:pointer;height:42px;width:42px;margin:10px 0;}

根据你的页面布局做相应的调整，使箭头出现在合适的位置。下面就是jquery代码了（网上找的）

jQuery(document).ready(function($){  var s= $(‘#shangxia’).offset().top;$(window).scroll(function (){$(“#shangxia”).animate({top : $(window).scrollTop() + s + “px” },{queue:false,duration:500});});  $body = (window.opera) ? (document.compatMode == “CSS1Compat” ? $(‘html’) : $(‘body’)) : $(‘html,body’);  $(‘#shang’).click(function(){$body.animate({scrollTop: ‘0px’}, 400);});  $(‘#xia’).click(function(){$body.animate({scrollTop:$(‘#foot’).offset().top}, 800);});});

保存到一个js文件里，再加载就大功告成了。