用JS和CSS实现页面的向上向下滚动效果

一直以来wordpress都非常流行，但自己却毫无了解。今天也特意下载了一个安装并运行了，感觉确实不错，真的是做个站的最佳选择。但最让我感兴趣的却是那些优秀的wordpress主题效果，实在非常漂亮。这里特意摘取其中某个主题的页面滚动效果与大家共享。这种效果也都在本站中得以应用。

该效果是基于jQuery和CSS实现的，大体分为以下几步：

1.添加jQuery类库文件jquery.min.js

2.添加得以实施滚动效果的图片，分两块

第一：html代码段：

<div id="roll">

<div title="回到顶部" id="roll_top"></div>

<div title="转到底部" id="fall"></div>

</div>

第二：CSS代码段：

#roll_top,#fall,#ct {
 position:relative;
 cursor:pointer;
 height:40px;
 width:15px;
 }
#roll_top {
 background:url(roll.png) no-repeat;
 }
#fall {
 background:url(roll.png) no-repeat 0 -80px;
 }
#ct {
 background:url(roll.png) no-repeat 0 -40px;
 }
#roll {
 display:block;
 width:15px;
 margin-right:-508px;
 position:fixed;
 right:50%;
 top:50%;
 _margin-right:-507px;
 _position:absolute;
 _margin-top:300px;
 _top:expression(eval(document.documentElement.scrollTop));
 }

3.添加底部标签——即用于向下滚动时的目标标签，此处以dibu为例：

<div id="dibu"></div>

4.javascript代码段，用于实现滚动效果的，也是关键：

jQuery(document).ready(function($){
$('#roll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});
$('#fall').click(function(){$('html,body').animate({scrollTop:$('#dibu).offset().top}, 800);});