jQuery Scroll插件响应式单页全屏滚动介绍

One Page Scroll是一个响应式单页全屏滚动的jQuery插件，效果有点类是于fullpage.js，不过这个插件却是另外一个，它可以轻松的建立一个动感的响应式的滚动效果页面，比较适用于单页面的专题站，如：Apple’s iPhone 5S 这样的网站，能大大的提升用户的体验，也提升自身的品牌形象。当然One Page Scroll是基于jquery的，且需要1.9.0以上版本，支持现代浏览器和IE8以上版本。

One Page Scroll响应式单页全屏滚动jQuery插件

插件要求

jQuery（1.9.0或以后的版本）
注：jQuery 1.9.0以后强烈建议因为使用jQuery小于1.8.3 jquery.onepage-scroll.js一起，原来是一个基于散列的XSS vulnerabiliry。

see: http://jsfiddle.net/33WJx/
使用方法

引入插件必须的样式文件和脚本文件

css’ rel=’stylesheet’ type=’text/css’>

编写HTML代码

一个滚动页面让你改变你的网站为一一个页面滚动的网站，允许用户滚动一页的时候。这是完美的创造一个网站，你想给观众展现一些。例如，苹果的iPhone 5S网站使用相同的技术。
添加到您的网站，只包括最新的jQuery库一起jquery.onepage-scroll.js，onepage-scroll.css到你的文件的调用函数如下：

  ...
 

“Main”必须低于一级body标签以使其工作全页。现在激活插件如下：

$(".main").onepage_scroll({
   sectionContainer: "section",     // 可自定义选择器
   easing: "ease",                  // 接受 CSS3 动画类型： "ease", "linear", "ease-in","ease-out", "ease-in-out", or even cubic bezier value such as "cubic-bezier(0.175, 0.885, 0.420, 1.310)"
   animationTime: 1000,             // 每个板块的动画时间
   pagination: true,                // 是否显示分页
   updateURL: false,                // 是否随着用户滚动更新URL
   beforeMove: function(index) {},  // 页面滚动前回调函数
   afterMove: function(index) {},   // 页面滚动后回调函数
   loop: false,                     // 页面循环滚动
   keyboard: true,                  // 是否激活键盘控制
   responsiveFallback: false,        // 改变浏览器大小后恢复到正常的滚动，如设计宽度小于600px时，恢复正常滚动
                                                       
   direction: "vertical"            // 滚动方向，选项 "vertical" 和 "horizontal". 默认值 "vertical". 
});

就是这样。现在，你的网站应该以同样的方式工作的苹果iPhone 5S网站。你应该可以刷上/下为好当你的网站在手机上观看
键盘快捷键

You can trigger page move with hotkeys as well:

Up arrow / Page Up
Pressing the up arrow or the page up key allows you to move the page up by one.
Down arrow / Page Donw
Pressing the down arrow or the page down key allows you to move the page down by one.
Spacebar
Pressing the space key allows you to move the page down by one.
Home
Pressing the home key brings you back to the first page.
End
Pressing the end key brings you to the last page.

绑定事件

你也可以触发网页编程和移动：

$.fn.moveUp()

这种方法允许您移动网页上的一个。这个动作相当于向上/向下刷。

  $(".main").moveUp();

$.fn.moveDown()

这种方法允许您移动下一页。这个动作相当于滚动/滑动起来。

  $(".main").moveDown();

$.fn.moveTo(page_index)

这个方法允许你移动到指定的页索引程序。

  $(".main").moveTo(3);
Callbacks
You can use callbacks to perform actions before or after the page move.
beforeMove(current_page_index)
This callback gets called before the plugin performs its move.
  $(".main").onepage_scroll({
    beforeMove: function(index) {
      ...
    }
  });
afterMove(next_page_index)
This callback gets called after the move animation was performed.
  $(".main").onepage_scroll({
    afterMove: function(index) {
      ...
    }
  });

If you want to see more of my plugins, visit The Pete Design, or follow me on Twitter and Github.

插件特点

（不）显示右侧圆点项目导航
（不）显示命名锚记
循环/禁止循环
回退（使用浏览器自带滚动）/指定回退
支持键盘控制，左右上下/ Page Up / Page Donw / Home / End 等
水平/横向滚动
回调函数