在 NextJS 中的链接路由更改之前滚动到页面顶部答案

【问题标题】：Scroll to top of page before Link route change in NextJS在 NextJS 中的链接路由更改之前滚动到页面顶部
【发布时间】：2022-01-16 00:40:40
【问题描述】：

当我单击指向新页面的链接时，页面会加载，然后滚动到页面顶部。我想更改此行为，即在呈现路由更改之前滚动重置到页面顶部。如果您在主页上向下滚动，然后使用导航栏导航到新页面而不向上滚动，您可以在https://mitconsulting.group/ 看到行为，新页面呈现然后滚动到顶部。这弄乱了我的淡入滚动动画并且通常看起来很糟糕。

【问题讨论】：

这不是 Next.js 应用程序的默认设置，您是否在应用程序的任何位置添加了 scroll-behavior: smooth 样式？删除它会阻止滚动动画。
也许你可以使用next/router, routeChangeStart event，例如：router.events.on( 'routeChangeStart', () => { /* scroll to top */ } );

标签： javascript html reactjs scroll next.js

【解决方案1】：

如果您像我一样使用 react-bootstrap，则需要用 scroll-behavior: auto !important; 覆盖 scroll-behavior: smooth;

【讨论】：

像魅力一样工作。把它放在:root {} css 选择器就可以了。