用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);});