Skip to content

小小前端

明月本无心,行人自回首。

Menu
  • 前端开发
  • 编程技术
  • SQL语句
  • Linux
  • 生活/旅行
  • JSEditor
  • MiniBarCMS
  • About
  • 隐私政策
Menu

jQuery插件之ScrollToAnyWhere

Posted on 2016年11月29日2016年11月29日 by king2088

闲着无聊,自己写了一款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



jquery.ScrollToAnyWhere.js demo



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

发表评论 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注

分类

近期文章

  • cordova-plugin-camera在某些android机型中拍照或选择文件时闪退出错的解决办法 2019年10月24日
  • JavaScript nodeJS base64加密解密url参数 2019年10月15日
  • 利用expressJS编写reset api 2019年4月13日
  • angular4 + http拦截器 2019年3月21日
  • ionic navCtrl.pop如何传递参数给上一个页面 2018年11月16日
  • ionic3搭建开发/测试环境 2018年10月25日
  • ionic2、3双击硬件back按键退出应用 2018年10月24日
  • VMware安装Mac OS High Sierra 10.12及高版本无法全屏 2018年8月24日

近期评论

  • 手表资讯发表在《ReactJS环境搭建》
  • king2088发表在《ionic中使用热更新插件cordova-hot-code-push》
  • 重阳节的诗句发表在《常用的sql语句》
  • 新郎致辞发表在《PHP代码实现WordPress相关文章的几种方法》
  • 霸道总裁发表在《vsftpd 提示 unrecognized service 解决办法》

归档

标签

Ajax Android Angular APP Cordova CSS css3 express html5 ionic Java javascript jQuery Linux loading mac Mac OS mongodb MySQL node nodejs PHP react SQL SSH VirtualBox vue vue-cli win10 WordPress WP REST API 主题 兼容性 前端 备份 插件 数据库 数组 服务器 正则表达式 浏览器 热更新 目录 组件 错误
2023年 3月
一 二 三 四 五 六 日
 12345
6789101112
13141516171819
20212223242526
2728293031  
« 10月    
© 2023 小小前端 | Powered by Superbs Personal Blog theme