Jquery上下滑动效果

Jquery上下滑动这个效果在很多WordPress博客里都有，很是流行啊！主要作用就是帮助访客快速的到达网站的顶部，底部，和留言板块。今天，也折腾了一下，在我们情侣博客《双陈记》中也实现了这个Jquery上下滑动效果。以下代码并非《双陈记》情侣博客原创，我也找不到原作者了，网上代码也挺多的，代码来源网络。
1.首先前提加载Jquery库：

2.HTML代码放在需要显示上下滑动导航的地方，比如《双陈记》的就放在文章页single.php里.

3.加载css样式代码：

#shangxia{position:absolute;top:40%;right:50%;margin-right:460px;display:block;}

#shang,#comt,#xia{background:url(images/huadong.png) no-repeat;position:relative;cursor:pointer;height:17px;width:16px;margin:2px 0;}

#comt{background-position:center -16px;height:16px;}

#xia{background-position:center -34px;}

这里需要一个图片：

图片可以自行设计修改，如图片大小有变化相应的css也需要修改。

4.加载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_info’).offset().top}, 800);});

$(‘#comt’).click(function(){$body.animate({scrollTop:$(‘#comments’).offset().top}, 800);});

});

‘#foot_info’为底部footer的ID，’#comments’为留言框的ID根据自己ID做相应更改

建议存在一个单独的Js文件：

如这样<script type=”text/javascript” src=”http://love730.com/wp-content/js/scroll.js”></script>

到这里就OK了。

《双陈记》情侣博客成功实现Jquery上下滚动的效果了。

《双陈记》情侣博客

Jquery上下滑动效果

已经有5位童鞋留言了，还不来盖楼！