20 個用於處理頁面滾動效果的 jQuery 插件

　對設計和開發一個網站來講，web開發者不能低估了網站滾動效果的重要性。現在，設計者們都視爲一大挑戰了，在網站中設計出吸引眼球的高效視覺滾動效果。幸運的是有各類各樣的jquery 滾動插件可供他們使用，有了這些插件，他們能夠根據頁面滾動的位置作出不少吸引眼球的效果，像背景變換、動畫等等。

　　本文中我收集了20款能夠幫你實現很絢效果的Jquery滾動插件。 有了下面的這些jQuery滾動插件，你能夠隨意的讓網站中的任何元素滾動， 使網站變得更加絢麗、吸引眼球。

　　1. One Page scroll

　　One Page Scroll，一個jQuery插件，簡化了相似網站的建立。它須要不多的設置，只須要建立HTML結構，調用函數就能夠了。

　　可選的，easing功能，它的速度和循環行爲也能夠設置。並且，它已經支持對每一個頁面SEO友好的URL。

　　2. Scrolld

　　Scrolld.js是一個jQuery的獨特開源插件。Scrolld.js提供了一種完美的高精度的佈局方法，且使用實時更新的數據值生成導航。使用Scrolld.js滾動到項目將永遠精準且將提供最好的用戶體驗。Scrolld.js是專門爲支持響應式佈局而設計的，能夠將頁面長導航變成一個簡單的任務欄。Scrolld.js設計初衷是爲能方便使用，並可以在幾分鐘內快速部署。

　　3. Animate Scroll

　　AnimateScroll 是一個簡單的jQuery插件,它用來爲滾動增長延遲效果. 能夠自定義滾動樣式(30多種滾動效果)和滾動速度. 還有一個能夠操縱"滾動結束位置"的"padding"選項. 這個插件不侷限於整個頁面,某個特定的包裹元素也能夠做爲其目標.

　　4. JInvertScroll

　　jInvertScroll 是一個操縱默認滾動行爲和強制水平滾動的jQuery插件.它經過onScroll回調函數簡化了視察效果的建立,咱們能夠在onScroll回調函數中爲任意元素增長動畫效果.該插件很小,只有不到1KB大小,並且幾乎不須要任何配置就能夠工做. 爲某個包裹元素添加一個特定的樣式類而後調用一個JS方法就足夠了.

　　5. Smint

　　Smint 是一個幫助開發者在單頁面風格的網站中建立導航. 它有兩個主要的元素, 一個是不動的導航條,當你向下滾動頁面的時候它會停留在頁面的頂部,另外一個是菜單按鈕,當你點擊的時候會自動將頁面滾動到相應的區域.

　　SMINT插件很簡單,因此只有一個控制頁面滾動速度的選項. 默認的速度是500毫秒 (半秒鐘),但你能夠將它設置爲任意你喜歡的值. 下載的文件中包含一個demo,因此你能夠輕鬆地將它做爲你本身單頁面網站的模板.

　　6. jQuery Arbitrary Anchor Plugin

　　jQuery Arbitrary Anchor Plugin 容許頁面滾動到頁面中任意的基於jQuery/CSS選擇器的對象上. 你能夠經過在頁面URL的#後面添加一個jQuery/CSS選擇器來建立一個有用而且整潔的動態錨點滾動效果. 該插件繼承了普通錨點的功能,也就是說,一個擁有名值屬性的錨點標籤仍然能夠被正常地滾動到. 一個具備與錨點相同值的ID屬性的元素也具備一樣的效果. 這個小小的插件能夠被應用到任何元素上.

　　7. ScrollUp

　　ScrollUp 是一個輕量級的jQuery插件,它用來輕鬆實現自定義能夠在任意網站使用的"滾動到頂部"效果.若是想建立一個可見的線條來幫助肯定距離頂端的理想滾動距離,你須要爲activeOverlay設置項制定一個有效的CSS顏色.ScrollUp能夠經過CSS實現徹底可定製,這使得它能夠被很容易的應用到你的項目中. 只須要在你的CSS文件中scrollUp生成的ID設置你的樣式便可. 它是基於MIT協議發佈的.

　　8. jQuery Stick ‘em

　　jQuery Stick ‘em 可使內容在滾動的時候固定在某個點上.有時候,咱們有一些很高的圖片. 因此當你滾動到圖片的底部以後,你將不得不滾回到描述你剛纔看的圖片的文字處.

　　解決辦法就是當你滾動頁面的時候把內容固定. 坑爹的是,咱們不能僅僅把文字的位置設置爲:fixed,一旦滾動到頁面底部就玩完了.因爲有時候頁面上會有不少部分,咱們不得不在某個點將內容"取消固定". 那麼讓咱們來解決這個問題,jQuery Stick'em就可以實現該功能.

　　9. Infinity.js

　　Infinity.js是用於web的表格視圖UI庫：它可以加速長列表的滾動而且保證你的無限的數據流暢和穩定。它體積小，久經測試並且性能很好。這是Github上最火的代碼，而且以BSD協議分發。被註釋的源代碼做爲演示Infinity關閉與開啓是可用的。

　　Infinity.js是Airbnd公司開發的，除了流行許願列表和朋友訂閱部門，如今已經子啊平常的生產中使用。它只依賴於jQuery。

　　10. jQuery Scroll Path

　　11. Mobiscroll

　　Mobiscroll 是一個爲移動設備(Android手機,iPhone,iPad,Galaxy Tab)準備的輪式滾動日期和時間的選擇器.它能夠被自定義來支持任意自定義的數值,也能夠被用做對於本土選擇控制的一個直觀的替換. 它的樣式是能夠改變的.

　　12. Page Scroller

　　Page Scroller 是一個基於JavaScript的強大的流暢滾動導航系統,它使用強大的jQuery庫. 該插件能夠在任何網站上輕鬆建立.你能夠選擇導航菜單的位置,也能夠輕鬆地改變滾動速度.滾動插件須要依賴jQuery1.3以上的版本.

　　13. WayPoints

　　Waypoints是一個比較小的jQuery框架，經過它能夠輕鬆的在任何滾動元素滾動狀況下執行函數。Waypoints可根據用戶在頁面滾動的位置生成一個比較穩定的流行UI模式。Waypoints遵循MIT和GPL雙重協議。 據測試，在jQuery 1.4版本以上兼容IE6+, FF3+, Safari 4+, 和 6+瀏覽器。

　　14. 自定義滾動條插件

　　自定義滾動條插件充分利用了jQuery的自帶的強大自定義功能。它的特色是支持水平和垂直滾動、鼠標滾輪滾動（藉助Brandon Aaron jquery mouse-wheel插件的功能）、易滾動和自適應滾動條高度和寬度。

　　你只須要簡單的包含一下jquery.min.js 、jquery-ui.min.js,、the jquery.easing.1.3.js （處理動畫的插件）, jquery.mousewheel.min.js （爲了讓插件支持鼠標滾輪滾動）和  query.mCustomScrollbar.css（自定義內容和滾動條文件）

　　15. Windows

　　Windows是一個輕量級屏幕滾動jQuery插件。 他提供有簡單便利的API接口，讓你很輕鬆的就能管理頁面/內容的位置從而給網站帶來更好的瀏覽體驗。這個插件能夠分析某定義的內容是否在視點，分析在視點的多少，而後能夠觸發任何事件，好比：經過滾動把頁面調整到內容上。

　　16. Perfect Scrollbar

　　Perfect Scrollbar（完美滾動條）是一個少於14kb的輕量級jQuery插件。它不會破壞原來的佈局或者是必要的Css。本插對任何大小的元素容器都適用，如果某個容器大小變化了它能夠從新調整排列位置。並且徹底能夠自定義滾動條的樣式，若是有須要你還能夠外加jquery-mousewheel插件。

　　17. Any List Scroller

　　Any List Scroller 是一個很是方便的jQuery插件,它可以爲任意列表在任意維度提供滾動.列表元素的大小是任意的, 它能夠在第一個或者最後一個元素上中止,也能夠無休止工做, 還有自動滾動,展現的元素的數量也是能夠設置的.

　　18. SuperScrollorama

　　它使用了功能豐富的TweenMax 和the Greensock Tweening 引擎(在你使用以前請先查看它的協議)來完成效果. 與動畫應用相似, 它容許咱們在元素出如今視角中或者某個特定的滾動點的時候爲其添加tweens和時間軸.

　　19. Scroll Follow

　　Scroll Follow 是一個容許DOM對象跟隨用戶滾動頁面移動的jQuery插件. 這意味着它能夠容許元素隨着用戶滾動頁面的時候往下移動. Scroll Follow 已經成功的,儘管不普遍的,在IE6，IE7,FF2,FF3,Safari3和Opera9在Windows上經過了測試.你也能夠設置滑動動畫的延遲時間.

　　20. Sly

　　Sly 是一個能夠經過不少有用的選項來提供基於物件(好比圖片或者內容的galleries)的滾動效果的jQuery插件.在一個定義的容器元素內,裏面的部件能夠在滾動器或者它提供的方法,好比next,nextPage,toStart,toEnd,5 toStart等,的幫助下被瀏覽.

　　原文地址：http://codegeekz.com/20-jquery-plugins-for-scrolling-effects/