OnePageScroll.js是一款带有背景视觉差效果的jQuery整页滚动特效插件。OnePageScroll.js能够滚动一次鼠标滚轮就使整个页面向上或向下翻动一页。并且在页面滚动时还带有一点视觉差效果。
HTML结构
使用该整页滚动插件，首先要在页面中引入jquery和jquery.onepage.js以及onepage-scroll.css。
<body>
...
<div class="main">
<section>...</section>
<section>...</section>
...
</div>
...
</body>
注意：推荐将wrapper div.mian放在body标签的下一级，这样更容易将它制作成全屏效果。
JAVASCRIPT
通过下面的语句来调用该整页滚动插件。
$(document).ready(function() {
...
$(".main").onepage_scroll({
sectionContainer: "section",
easing: "ease",
animationTime: 1000,
pagination: true,
updateURL: false
});
...
});
下面介绍一些可用参数：
sectionContainer ：如果你不想使用section来作为每个单页，可以使用该参数来改变它。该参数接收jQuery选择器，默认标签为section。
easing ：该参数用于确定页面在向上或向下滚动时的easing effect（缓动效果）。该参数接收所有的CSS3 easing选项，例如：linear, ease-in, ease-out, ease-in-out，你甚至可以使用cubic-bezier制作反弹效果。更多关于如何生成cubic-bezier的效果资料，请参考Ceaser。默认值为ease。
animationTime ：该参数用于设置每次执行动画的时间。单位毫秒，默认值为1000。
pagination ：如果设置为true，将自动在屏幕的右边添加一个分页条。你可以通过CSS很容易的改变它的位置。设置为false移除分页条。默认值为true。
updateURL ：该参数用于设置是否改变用户当前浏览的section的URL到指定的URL。如果你想让每个section都指向不同的URL设置该参数为true。默认值为false。
公共方法
该整页滚动插件可以通过编程的方式来触发页面的滚动，它提供了一些公共方法。
$.fn.moveUp()
该方法使页面向上滚动一页。
$(".main").moveUp();
$.fn.moveDown()
该方法使页面向下滚动一页。
$(".main").moveDown();
你可以在按钮上使用上面的公共方法来使页面整页上下滚动。
