NextJS路由 - 切换页面时是否有一种方法可以从顶部开始?与GSAP相关
这是我遇到的情况,它会影响我的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 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
没关系,我解决了!
我需要覆盖
scroll-behavior:smooth;
scroll-behavior:auto!我基本上将
scroll-behavior放置:auto!esto!
Nevermind, I solved it!
I needed to override the
scroll-behavior: smooth;
withscroll-behavior: auto !important;
.I basically put
scroll-behavior: auto !important;
at the root:root {}
.