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" });
这是一个使用锚点的基本示例：