javascript - nextjs页面跳转怎么取消自动滚到顶部的这个过程？

Question

场景：页面A滚动一段距离，使用Link标签跳转到页面B，页面会记录页面A滚动的距离，向上滚动到顶部，使用了scroll：false这个属性跳转到页面B页面不会回到顶部。现在我想取消滚动的这个过程，让每次跳转到的页面初始都定位在顶部怎么做？

Answer 1

可以链接跳转的时候加一个查询参数：
在 styles/globals.css ：

html.disable-smooth-scroll {
  scroll-behavior: auto !important;
}

import Link from 'next/link';

<Link href={{ pathname: '/your-page', query: { scrollToTop: 'true' } }}>
  Your link text
</Link>

import { useEffect } from 'react';
import { useRouter } from 'next/router';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = (url) => {
      const urlObj = new URL(url, window.location.origin);

      if (urlObj.searchParams.get('scrollToTop') === 'true') {
        document.documentElement.classList.add('disable-smooth-scroll');
        window.scrollTo(0, 0);
        setTimeout(() => {
          document.documentElement.classList.remove('disable-smooth-scroll');
        }, 0);
      } else {
        window.scrollTo(0, 0);
      }
    };

    router.events.on('routeChangeComplete', handleRouteChange);

    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, [router.events]);

  return <Component {...pageProps} />;
}

export default MyApp;