闲着无聊,自己写了一款jQuery插件,名字就叫ScrollToAnyWhere,下面来介绍下。
github项目地址:https://github.com/king2088/jquery.ScrollToAnyWhere
jquery.ScrollToAnyWhere.js是一个jQuery滚动插件,基本上,只要给出元素id或class,即可实现滚动。其中包含了,滚动到顶部(Scroll to Top)、滚动到底部(Scroll to Bottom)、滚动到任意位置(Scroll to AnyWhere)。
一、兼容性 Browser Compatibility
什么,你还在用IE6?一个插件,大家都很在乎兼容性,本人鄙视IE,因此仅支持jQuery 2.0版本以上的jQuery版本,2.0版本以下未进行过测试,IE10以下浏览器未进行测试。不支持IE9及以下版本浏览器。
IE9- NO WAY.
jquery library 2.0+
二、使用方法
1、导入jQuery文件 Import jQuery library
在html代码head或者body标签中引入jQuery库和jquery.ScrollToAnyWhere.js
Include jquery library and jquery.ScrollToAnyWhere.js in html tag for head or body
or
//html代码内容......
2、使用方法
$(‘selector’).ScrollToAnyWhere(op,elements,options);
op有3个值,分别是‘top’,‘down’,‘anywhere’,分别代表‘上’,‘下’,‘任意位置’
elements为需要滚动到的位置元素id或class名称,必须带有‘.’与‘#’
options有3个固定名称,值可以任意改变。分别是’offset’,’offset_opacity’,’times’,分别代表‘距离顶部距离(当距离顶部为多少时,淡出相应的图标、文字)’,‘滚动条滚动到的位置(到达此位置时,图标或文字自动透明)’,‘滚动速度’
3、滚动到顶部(Scroll to Top)
//html代码内容......
4、滚动到底部(Scroll to Bottom)
//html代码内容......
5、滚动到任意位置(Scroll to AnyWhere)
使用方法为$(selector).ScrollToAnyWhere(‘anywhere’,selector),第一个selector为当前产生事件的元素,第二个selector则为将要滚动到的元素。两个selector都需要填写正确的class与id名称,如$(‘#div’).ScrollToAnyWhere(‘anywhere’,’.class’)或$(‘#div’).ScrollToAnyWhere(‘anywhere’,’#class’)
//html代码内容......
6、自定义可选参数(options)
//html代码内容......
演示地址:http://www.egtch.com/work/jQueryPlug-in/ScrollToAnyWhere/demo/index.html