jQuery.scrollTo 滚动到页面指定位置 - 文章教程

jQuery.scrollTo 滚动到页面指定位置

发布于 2020-06-10 字数 5319 浏览 1535 评论 0

jQuery.scrollTo 用于定位页面中元素的位置,并使滚动条滚动到当前元素。 插件可以按x轴、y轴滚动。可以嵌套元素,当前元素在父元素中滚动。

安装

NPM

  • Install: npm install --save jquery-scrollto
  • Module: require('jquery-scrollto')

Browserify

  • Install: npm install --save jquery-scrollto
  • Module: require('jquery-scrollto')
  • CDN URL: //wzrd.in/bundle/jquery-scrollto@1.4.6

Ender

  • Install: ender add jquery-scrollto
  • Module: require('jquery-scrollto')

Direct

使用方法

jQuery.scrollTo的签名设计为类似于 $().animate()

$(element).scrollTo(target[,duration][,settings]);

要滚动整个窗口,必须使用可滚动元素 $(window)

目标

这定义了element必须滚动到的位置。该插件支持所有这些格式:

  • 固定位置的数字: 250
  • 固定位置带有px的字符串: "250px"
  • 带有百分比(等于容器大小)的字符串: "50%"
  • 带有相对步长的字符串: "+=50px"
  • 一个对象,left并且top包含以下任何一个:{left:250, top:"50px"}
  • "max"滚动到末尾的字符串。
  • 相对于要滚动的元素的字符串选择器: ".section:eq(2)"
  • DOM元素,可能是要滚动的元素的子元素: document.getElementById("top")
  • 带有DOM元素的jQuery对象: $("#top")

设定

duration参数是具有相同名称的设置的快捷方式。这些是受支持的设置:

  • axis:动画方向,默认 xy,可选 xyyx
  • interrupt:如果true用户滚动,则将取消动画。默认为false
  • limit:如果true插件不会滚动超出容器的大小。默认为true
  • margin:如果为true,则减去target元素的空白和边框。默认为false
  • offset:添加到最终位置,可以是数字或带有left和的对象top
  • over:添加target尺寸的%:{left:0.5, top:0.5}
  • queue:如果true将滚动一个axis,然后滚动另一个。默认为false
  • onAfter(target,settings):动画结束时触发的回调(jQuery的complete()
  • onAfterFirst(target, settings):排队时第一个轴滚动后触发的回调

您还可以添加 $().animate() 支持的任何设置:

  • 持续时间:动画的持续时间,默认情况下是0即时的
  • 缓动:缓动方程的名称,必须注册缓动函数:swing
  • fail():动画停止时触发的回调(通过interrupt
  • step():为每个帧上的每个动画属性触发一个回调
  • progress():每帧触发一个回调
  • 还有更多信息,请查看jQuery的 文档

调用简写

您可以 $.scrollTo(...) 用作的简写 $(window).scrollTo(...)

更改默认设置

与大多数插件一样,默认设置是公开的,因此可以更改它们。

$.extend($.scrollTo.defaults, {
  axis: 'y',
  duration: 800
});

停止动画

jQuery.scrollTo 最终建立其可以通过调用停止普通动画 $().stop()$().finish()你叫在相同的元素 $().scrollTo(),其中包括 window。记住,fail() 当动画停止时,您可以传递一个回调来调用。

onAfter 和 requestAnimationFrame

jQuery.scrollTo具有onAfter动画完成后运行的回调。scroll事件触发前将调用它。为了解决这个问题,您可以使用 requestAnimationFrame在下一个刻度上进行操作。它在许多浏览器中都可用,但是您可能想对其不支持的少数几个进行 polyfill

$.scrollTo(100, {
  onAfter: function() {
    requestAnimationFrame(function() {
        $(".result").addClass("selected");
    });
  }
});

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

伊面

文章 0 评论

白况

文章 0 评论

七禾

文章 0 评论

亢潮

文章 0 评论

悲念泪

文章 0 评论