你可以看到在示例文件，您将需要包括JavaScript文件jquery.multiscroll.js和CSS文件jquery.multiscroll.css的插件，以及jQuery。或者，你可以添加jQuery UI库，如果你想使用其他的缓动效应除了那些包含在jQuery库，这是线性或摆动的影响。（easeinquart是默认激活，因此你会需要jQuery UI库或定制的版本，包括在供应商文件夹下的名字jQuery。jquery.easings.min.js.）
包括文件：
<link rel="stylesheet" type="text/css" href="jquery.multiscroll.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!-- This following line is needed in case of using the default easing option or when using another one rather than "linear" or "swing". You can also add the full jQuery UI instead of this file if you prefer --> <script src="vendors/jquery.easings.min.js"></script> <script type="text/javascript" src="jquery.multiscroll.js"></script>
所需的HTML结构
每一部分都是用div包含部分类定义。默认情况下，活跃的部分将是第一部分，作为首页。
<div id="multiscroll"> <div class="ms-left"> <div class="ms-section">Some section</div> <div class="ms-section">Some section</div> <div class="ms-section">Some section</div> </div> <div class="ms-right"> <div class="ms-section">Some section</div> <div class="ms-section">Some section</div> <div class="ms-section">Some section</div> </div> </div>
初始化
你需要做的是调用 $(document).ready 准备功能：
$(document).ready(function() {
$('#multiscroll').multiscroll();
});与所有的选项设置更复杂的初始化可能看起来像这样：
$(document).ready(function() {
$('#multiscroll').multiscroll{
verticalCentered : true,
scrollingSpeed: 700,
easing: 'easeInQuart',
menu: false,
sectionsColor: [],
navigation: false,
navigationPosition: 'right',
navigationColor: '#000',
navigationTooltips: [],
loopBottom: false,
loopTop: false,
css3: false,
paddingTop: 0,
paddingBottom: 0,
normalScrollElements: null,
keyboardScrolling: true,
touchSensitivity: 5,
//events
onLeave: function(index, nextIndex, direction){},
afterLoad: function(anchorLink, index){},
afterRender: function(){},
afterResize: function(){},
});
});采用锚链接
为了创造某些章节的链接，如果您使用的是multiscroll.js为段锚链接（使用锚选项），那么你将能够使用锚链接也直接定位到某一段通过使用URL。
你可以通过建立加锚访问URL做。例如：http://www.jq22.com/#secondSection.
小心！数据锚标签不能具有相同的值作为网站的任何ID元素（或IE名）。
你也可以使用菜单选项和利用锚链接（#）作为解释下面的选项部分。
选项
verticalcentered：（默认为true）的含量在剖面垂直居中。
scrollingspeed：（默认为700）的滚动速度转换的毫秒。
sectionscolor：（默认无）定义CSS背景色属性对于每一节的例子：
$('#multiscroll').multiscroll({
sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});anchors：(default []) 定义的锚链接（#例子）是对每一部分显示的URL。使用锚向前和向后导航也可以通过浏览器。这个选项也允许用户书签一个特定的部分。小心！如果你使用锚，他们不能具有相同的值作为网站的任何ID元素（或IE名）。
easing：（默认easeinquart）定义了用于垂直和水平滚动的过渡效果。
looptop：（默认为false）定义是否滚动在第一段
loopbottom：（默认为false）定义是否向下滚动在最后一节
CSS3：（默认为false）。确定是否使用JavaScript或CSS3将滚动的部分。加快平板电脑和移动设备浏览器支持CSS3运动有用。如果此选项设置为true和浏览器不支持CSS3，jQuery回退将代替。
paddingtop：（默认0）定义的顶部填充每个部分具有一个数值和测量（paddingtop：“10px，paddingtop：“10em”……）在使用一个固定的报头的情况下有用的。
paddingbottom：（默认0）定义了底部填充每个部分具有一个数值和测量（paddingbottom：“10px，paddingbottom：“10em”……）。在使用固定页脚的情况下有用的。
normalscrollelements：（默认为空）如果你想避免自动滚动，滚动时的一些元素，这是你需要使用的选项。（有用的地图，滚动div等）需要与这些元素的jQuery选择器字符串。（例如：normalscrollelements：“# Element1，element2。”）
keyboardscrolling：（默认为true）的定义，如果内容可以通过使用键盘
touchsensitivity：（默认5）定义的浏览器窗口的宽度/高度的百分比.
menu：（默认为false）选择器可用于指定与部分链接菜单。这样的部分的滚动将使用类活跃在菜单中激活相应的元素。这不会产生一个菜单，但只会增加活动课在给予相应的锚链接菜单元素。为了将与部分菜单的元素，一个HTML5数据标签（数据menuanchor）将需要使用相同的锚链接,例子：
<ul id="myMenu"> <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li> <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li> <li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li> <li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li> </ul>
$('#multiscroll').multiscroll({
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
menu: '#myMenu'
});navigation：（默认为false）如果设置为true，它会显示一个由小圈子的导航栏。
navigationposition：（默认none）可以向左或向右和定义的导航栏将显示它的位置（如果使用）。
navigationtooltips：（默认[ ]）定义了显示的情况下，它们被使用的导航界的提示。例如：navigationtooltips： ['firstSection', 'secondSection'].
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
