返回顶部插件

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的fastslow等参数。如

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

参数:effect

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

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

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

滚动到指定元素位置

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

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

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

更新日志 0.2(2013-09-21) 兼容原始锚点写法(href="#"href="#some-element") 0.1(2013-05-21) 整理代码API,编写文档,开源到github 0.0(2012-01-28) 实现基本功能

版权声明:

1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。
2、网站不提供资料下载,如需下载请到原作者页面进行下载。