jquery-roll

方便的一键返回顶部jQuery插件

用法

选定一个元素作为“返回顶部”的入口，例如

var $gotoTop = $('#gotoTop');

然后使用.roll()方法即可，如

$gotoTop.roll();

点击#gotoTop元素即可返回顶部。

进阶

roll()方法接受一个参数对象options，以实现更灵活的应用。

方向

• 参数：direction
• 取值：'left'/'top' 默认值为'top'

除了可以返回顶部，还可以使用direction:'left'返回“最左边”。如

$gotoTop.roll({
	direction:'left'
});

速度

• 参数：animSpeed
• 取值：数值，单位ms

传入一个数值以决定动画速度，暂不支持jQuery的fast、slow等参数。如

$gotoTop.roll({
	animSpeed:400
});

Easing

• 参数：effect

• 取值：jQuery的easing函数名，默认为linear，可以使用jQuery.easing插件扩充后再使用。如

  $gotoTop.roll({ effect:'easingInOut' });

如果看不懂什么是Easing，建议直接忽略本参数。

滚动到指定元素位置

除了可以滚动到最顶部（最左边），还可以滚动到一个指定元素someElement所在的位置。方法是在“返回顶部”按钮的href属性中写上someElement的选择器。

如页面中有一个元素id为header，点击返回顶部时希望回到#header元素所在位置，则在返回顶部按钮上写上href="#header"即可。

同时，还可以兼容原始的锚点跳转写法，比如跳到name为test的元素所在位置，则给href属性写上#test即可。

更新日志

0.2（2013-09-21）

• 兼容原始锚点写法（href="#"、href="#some-element"）

0.1（2013-05-21）

• 整理代码API，编写文档，开源到github

0.0（2012-01-28）

• 实现基本功能