处理页面滚动效果jQuery插件20例

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就能够实现该功能.