網上關於實現各種滾動效果的插件不勝枚舉，這里，我簡單介紹一下自己用過的兩款比較有代表性的插件：
1.jquery.slimscroll.js，需要先引入jquery類庫，主要用於模擬傳統的瀏覽器滾動條(豎向)，將要設置的內容外加div元素（可以取id為wrapper）包裹，然后在$(function(){})中進行實例化的參數設置：
var myScroll=$("#wrapper").slimScroll({ // width:"300px",//容器寬度度 height:"600px",//容器高度 size:"30px",//滾動條寬度 position:"left",//滾動條位置，默認right color:"green",//滾動條顏色,默認#000000 alwaysVisible:true,//是否禁用隱藏滾動條,默認false distance:"10px",//距離邊框距離，默認1px start:".floor2",//滾動條初始位置,可選值top,bottom,$(selector),默認top wheelStep:'12px',//滾動條滾動值,默認10px //railVisible:true,//滾動條背景軌跡,默認false //railColor:'#005612',//滾動條背景軌跡顏色,默認#333333 //railOpacity:0.8,//滾動條背景軌跡透明度,默認0.2 //allowPageScroll:true,//滾動條滾動到頂部或底部時是否允許頁面滾動,默認false })
網上找來的資料並沒有介紹多少與slimscroll.js相關的事件或者方法，這里，經過自己的嘗試，可以將一個簡單的樓層滾動邏輯寫成如下：
$(".to8").on("click",function(){
myScroll.slimscroll({
scrollTo:'2100px'
});
})
$(".to2").on("click",function(){
myScroll.slimscroll({
scrollTo:'300px'
});
})
如果想要滾動到某個具體元素的位置，除了計算出對應元素所對應的定位偏移量，好像就沒有其他比較好的方法（也可能是我沒有找到）。
想詳細了解jquery.slimscroll.js，可以移步到http://plugins.jquery.com/slimScroll/
2.iscroll.js，直接用的5+，聽說修復了舊版本中輸入框無法輸入、橫向滾動時無法上下滾動頁面等問題，現將自己使用過程中踩過的坑分享出來：
(1)只有容器元素的第一個子元素能進行滾動，其他子元素完全被忽略，html中布局如下：
<div id="wrapper"> <div id="scroller"> <ul> <li></li> ... </ul> <ul> <li></li> ... </ul> </div> </div>
(2)為滾動容器(#wrapper)增加position:relative或者absolute，這將解決大多數滾動器容器大小計算不正確的問題；
(3)當DOM准備完成后IScroll需要被初始化，所以最保險的方式是在window的onload事件中啟動它，在DOMContentLoaded事件或者inline initialization中做也可以；
如果你有一個復雜的DOM結構，最好在onload事件之后設置適當的延遲，再去初始化IScroll，一個簡單的實例化代碼如下：
var myScroll=new IScroll("#wrapper",{ //click:true, //preventDefault:false, preventDefaultException:{tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|A)$/}, disableMouse: true, disablePointer: true, //disableTouch:true, });
(4)在初始化后你可以通過options對象訪問myScroll實例的配置信息，即console.log(myScroll.options);
獲取當前的滾動位置，即console.log(myScroll.y);
獲取滾動到底部時的滾動位置，即console.log(myScroll.maxScrollY);
(5)當給scrollTo設置正數參數例如500時，即myScroll.scrollTo(0,-2333)，這會導致整個scroller向下滾動到離wrapper頂部500px的位置，兩者之間存在高度為500px的空白區域;
(6)scrollBy表示滾動到相對於當前位置的某處，即myScroll.scrollBy(0,-2333)，其余同上;
(7)當滾動到指定位置后，鼠標滑輪可以向下滑，但是不能向上滑，同時$(window).scrollTop()一直顯示為0，但是點中屏幕可以拉下上面的內容;
(8)一個簡單的樓層滾動效果可以寫成：
$(".to8").on("click",function(){
console.log(myScroll.y);
myScroll.scrollToElement(".floor8");
console.log(myScroll.y);
});
$(".to2").on("click",function(){
console.log(myScroll.y);
myScroll.scrollToElement(".floor2");
console.log(myScroll.y);
})
(9)改變DOM結構后直接設置滾動到指定位置，會出現偏差，所以需要加上refresh方法，例如：
$(".show").on("click",function(){
$(".spec").toggleClass("active");
myScroll.refresh();
myScroll.scrollToElement(".floor9");
})
(10)分別設置滾動前和滾動后的觸發事件，例如：
//滾動開始前的觸發事件 myScroll.on('beforeScrollStart', function(){ console.log('開始滾動'); }); //滾動結束時的觸發事件 myScroll.on("scrollEnd",function(){ console.log("已到達指定位置") })
(11)如果實例化myScroll后無法點擊<a>標簽，可以在參數設置中添加preventDefaultException:{tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|A)$/ };
(12)如果一次點擊觸發兩次click事件，阻止冒泡后還是會出現兩次，解決辦法是在參數設置中添加click:false;
(13)如果實例化myScroll后<input>標簽無法失焦，解決辦法有：
解封IScroll中的阻止默認事件，即參數設置中添加preventDefault:false，但是這樣一來就會帶來滑動的不流暢性甚至出現卡頓；
解封IScroll中的click事件，即參數設置中添加click:true，但是這樣會導致一次點擊觸發兩次click事件;
引入zepto.js+touch.js文件，在tap事件中設置輸入框的失焦，代碼如下：
$('body').on("tap",function(e){
if(e.target.nodeName != "INPUT"){
$('input').blur();
};
})
(14)如果頁面出現閃爍，直接給scroller添加css3新屬性-webkit-transform:translate3d(0,0,0)，會使瀏覽器啟動硬件加速，還可以添加-webkit-backface-visibility:hidden來隱藏被旋轉的元素的背面;
(15)如果頁面出現卡頓，解決辦法有：
參數設置中禁用掉一些不必要的功能（例如：bounce，momentum，fadeScrollbars，disableMouse，disablePointer）;
加上document.addEventListener('touchmove', function(e){e.preventDefault();},false);
(16)異步加載DOM帶來的滾動問題，解決辦法有：
每次加載后運行myScroll.refresh();
添加定時器，每次循環時獲取新增DOM區域的高度，當獲取的高度等於目標高度時，關掉定時器，然后實例化myScroll