ScrollId
A full screen pages scrolling plugin,depend on jQuery and may be Hammer.js
Demo
Demo is here
Including files
<script type="text/javascript" src='jquery.js'></script>
<script type="text/javascript" src='ScrollId.js'></script>
Usage 用法（前面是练英文—_—）
1. 构建HTML
推荐以下结构，当然标签和 id 可以随意。本插件主要作用是 整屏滚动到指定 id，因此必须设置每块的id
<div class='container'>
<section id="sec0">1</section>
<section id='sec1'>2</section>
<section id='sec2'>3</section>
// ...
</div>
2. 确保容器100%高度
从根节点到每屏的 section 高度都要设为100%
html,body{height:100%}
.container{height:100%}
section{height:100%}
3. 实例化 ScrollId 并运行
实例化
var scroll = new ScrollId();
配置，config() 接受 2 个参数，类型都为 object。
第一个参数是每块屏的配置，结构为
{
id 名称 :
{
alias : 滚动顺序 ,
beforeFun : 离开该屏之前的callback（可选）,
afterFun : 到达该 id 后的callback（可选）
}
...
}
第二个参数是一般设置，结构为
{配置项 : 值}
例如，以下配置的是有三个 id 为 sec0 sec1 sec2 的 full page ， 顺序为正常顺序。在离开 sec2 前会弹出字符串 "b"，在滚动到 sec 之后会弹出字符串 "a"，滚动速度是 1000 毫秒
scroll.config(
{
sec0 : {alias : 0},
sec1 : {alias : 1},
sec2 : {
alias : 2 ,
beforeFun : function(){alert('b')},
afterFun : function(){alert('a')}
}
},
{
speed : 1000
}
)
配置完成之后就可以执行 run() 运行了
scroll.run();
配置项
| 配置项 | 默认值 | 说明 |
|---|---|---|
| speed | 500 | 滚动速度 |
| ease | "easeInOutQuint" | 缓动类型 |
| isLoop | true | 是否循环滚动 |
| isTouch | false | 是否适用于触摸（依赖Hammer.js） |
公共方法
- setHashByScroll( isSrollTop )
isSrollTop：true 为向上一块屏滚动，反之
