NextJS路由 - 切换页面时是否有一种方法可以从顶部开始?与GSAP相关

发布于 2025-01-27 18:28:32 字数 436 浏览 5 评论 0原文

这是我遇到的情况,它会影响我的GSAP scrolltrigger动画:

我有一个可以加载和动画的主页。 当我向下滚动主页时​​,滚动扳机的行为正常。 当我到达底部并决定使用Navbar导航到另一个页面(我正在使用NextJS < link> component在此处),它将我发送到新页面,但请从新页面的底部,快速滚动到新页面的顶部。

这是一个问题,因为它同时触发了我的所有GSAP动画,该页面为该页面触发。

有没有一种方法可以切换到新页面,但是从顶部开始 - 而不是从Y位置并滚动到新页面顶部的任何地方?

本质上,发生的事情是,当我单击< link> NextJ中的组件,我的视口的Y位置在页面过渡期间保留。一旦我进入新页面,我仍然处于上一页相同的Y位置,但随后滚动到顶部。这很糟糕,因为它触发了我所有的GSAP动画。

Here's the scenario I'm coming across that's affecting my GSAP ScrollTrigger animations:

I have a home page that loads and animates.
When I scroll down the home page, scroll trigger behaves normally.
When I get to the bottom and decide to use the navbar to navigate to another page (I'm using the Nextjs <Link> component here), it sends me to the new page but starts at the BOTTOM Of the new page and quickly scrolls to the TOP of the new page.

This is a problem because it triggers all of my GSAP animations simultaneously for that page.

Is there a way to switch to a new page but START at the top— rather than start where ever you are in the y-position and scrolling to the top of the new page?

Essentially what's happening is that when I click on a <Link> component in Nextjs, the y-position of my viewport is retained during page transition. Once I'm on the new page, I'm still on that same y-position of the previous page, but then it SCROLLS to the top. This is bad because it triggers all of my GSAP animations.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

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

评论(1

倾城月光淡如水﹏ 2025-02-03 18:28:32

没关系,我解决了!

我需要覆盖scroll-behavior:smooth; scroll-behavior:auto!

我基本上将scroll-behavior放置:auto!esto!

Nevermind, I solved it!

I needed to override the scroll-behavior: smooth; with scroll-behavior: auto !important;.

I basically put scroll-behavior: auto !important; at the root :root {}.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文