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/