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。

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等,的幫助下被瀏覽.