Skip to content

小小前端

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

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

jQuery.scrollTo平滑插件使用方法

Posted on 2015年8月19日2015年8月19日 by king2088

jQuery.scrollTo是一个轻量级,跨浏览器和随高度可定制的动画滚动,jQuery,使用起来非常方便,平滑效果实在。在使用之前必须先引入jQurey,jQurey版本必须在1.8以上,这样插件才会成功。
1、使用方法
$(element).scrollTo(target[,duration][,settings]);
a、其中element代表的是网页元素,也可以是窗口,比如一个css中的名为.css的class,可以写为$(.css)
b、target

这定义元件滚动到的位置。该插件支持以下设置方法:
一些有固定位置:250
一个字符串与PX固定位置:“250px”
一个字符串的百分比(容器的大小):“50%”
一个字符串,相对步:“+ = 50px”
与对象左侧和顶部 containining任何上述的:{left:250,top:”50px”}
字符串“最大”滚动到最底部。
一个字符串选择,这将是相对于元素滚动: “.section:eq(2)”
DOM元素,该元素的可能是孩子滚动:的document.getElementById(”top”)
一个jQuery对象与DOM元素: $(“#top”)
c、settings设置
axis:轴线动画:XY(default),x,y,YX
interrupt:如果属实将取消动漫,如果用户滚动。默认是假的
limit:如果真的插件不会滚动到容器的大小。默认为真
margin:如果属实,减去的边缘和边境目标元素。默认是假的
offset:添加到最终位置,可以是一个数字或者一个对象与左边和顶部
over:添加一个%的的目标尺寸:{ left:0.5,top:0.5}
queue:如果真会滚动轴,然后其他。默认是假的
onAfter(target, settings): 回调时触发动画结束(jQuery’s complete() )
onAfterFirst(target, settings): 一个回调的第一轴滚动后排队时触发
2、简单的实例
$.extend($.scrollTo.defaults, {
axis: ‘y’,
duration: 800
});
3、比如我们需要点击某元素后,让其直接平滑到另一个固定的元素处,则可以写成如下:
$(function(){
$(“.arrow”).click(function(){
$.scrollTo(‘#content’,1000);
});
});
可以看到,当我们点击.arrow元素时,将直接平滑到#content处,滚动的时间为1秒。

发表评论 取消回复

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

分类

近期文章

  • 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