跳过主要内容

ScrollTo

快速入门

CDN 链接

gsap.registerPlugin(ScrollToPlugin) 

最简用法

  //scroll to 400 pixels down from the top
gsap.to(window, { duration: 2, scrollTo: 400 });
提示

如果你想在滚动条到达特定位置时触发某些动画,请使用ScrollTrigger插件。

描述

动画形式地改变窗口的滚动位置(比如执行window.scrollTo(x, y))或一个 DOM 元素的内容(比如执行myDiv.scrollTop = y; myDiv.scrollLeft = x;)。

警告

配合使用scroll-behavior: smooth在 CSS 中设置会导致冲突

要将窗口滚动到特定位置,请将 window 作为 tween 的目标对象,如下所示:

//scroll to 400 pixels down from the top
gsap.to(window, { duration: 2, scrollTo: 400 });

//or to scroll to the element with the ID "#someID" (as of GSAP 1.19.0):
gsap.to(window, { duration: 2, scrollTo: "#someID" });

要对 div 内容执行 tween,请确保你已对该 div 设置了overflow: scroll属性,然后操作如下:

//scroll to 250 pixels down from the top of the content in the div
gsap.to(myDiv, { duration: 2, scrollTo: 250 });

你可以定义 x 或 y 值,或者同时定义两者(在 x 和 y 轴上滚动)。例如,要滚动至距离顶部 400 像素、左侧 200 像素的位置,可以这样做:

gsap.to(myDiv, { duration: 2, scrollTo: { y: 400, x: 200 }, ease: "power2" });

你还可以选择性传递 offsetX 和/或 offsetY 数值,如果希望偏移目标元素的位置。

//scroll #someID into view with 50 pixels from the top (like a margin)
gsap.to(window, { duration: 2, scrollTo: { y: "#someID", offsetY: 50 } });

下面的示例使用了 offsetY,使每个部分在导航栏下方进入可视区域。点击下面示例中的部分按钮,并查看 JS 源代码。

加载中...

若希望 ScrollToPlugin 自动识别出滚动位置在外力作用下发生变化(比如用户手动拖拽滚动条),并取消该段 tween,请设置autoKill: true动画在scrollTo对象相关联的Observer,例如:

gsap.to(myDiv, {
duration: 2,
scrollTo: { y: 400, autoKill: true },
ease: "power2",
});

如果你想检测 autoKill 被触发的时间,可以定义一个onAutoKill回调函数轻松获取它。

gsap.to(window, {
duration: 2,
scrollTo: { y: 300, autoKill: true, onAutoKill: myAutoKillFunction },
});

function myAutoKillFunction() {
alert("autoKill");
}

你也可以通过ScrollToPlugin.config()

ScrollToPlugin.config({ autoKill: true })

要滚动到最大滚动位置,请使用字符串"max"作为值,像这样:

gsap.to(myDiv, { duration: 2, scrollTo: { y: "max" } });

如果你不把值包装成对象,插件将默认认为你想朝 "y" 方向滚动,因此这两行功能相同:

gsap.to(myDiv, { duration: 2, scrollTo: { y: "max" } });
gsap.to(myDiv, { duration: 2, scrollTo: "max" });

这是一个使用锚点的基本示例:

加载中...

目录