Next.js 在页面路由时保持滚动位置

Posted 2023-03-10

【中文标题】Next.js 在页面路由时保持滚动位置

【英文标题】：Next.js maintain scroll position when page Routing

【发布时间】：2020-04-23 16:19:27

【问题描述】：

我目前正在 Next.js 样板上创建一个网站。

我的路由代码是这样的。 （下）

import Link from 'next/link'


<Link href= pathname: '/some-url', query:  param: something  >
  <div>
    <button type="button" onClick=handleClickMore><span>+ More</span></button>
  </div>
</Link>

当我点击<Button> 时，我不想移动滚动位置。 但如您所知，当新页面被路由时，它会移动到顶部。有没有人知道在加载新页面时保持滚动位置。

【参考方案1】：

<Link scroll=false href="/"><a>Home</a></Link>

scroll=false 将禁用滚动到顶部的页面更改该特定链接。

参考：https://github.com/zeit/next.js/issues/3950

【参考方案2】：

谢谢你的回答 LDS 我想我找到了答案

当使用 Router.push() 页面滚动位置不移动。

解决方案代码是这样的。

import Link from 'next/link'

const handleClickMore = () => 
  Router.push(
    pathname: '/story/category/movie/movielist',
    query:  category: props.category, page: (parseInt(props.page) + 1) 
  )



<Link href= pathname: '/some-url', query:  param: something  >
  <div>
    <button type="button" onClick=handleClickMore><span>+ More</span></button>
  </div>
</Link>

仅供参考，我已跳过组件声明代码。

【讨论】：

这似乎打破了 Next 10 :(

【参考方案3】：

You may disable the scrolling There are two examples bellow

.scrollDisabled    
    position: fixed;
    margin-top: 0;// override by JS to use acc to curr $(window).scrollTop()
    width: 100%;

JS

var y_offsetWhenScrollDisabled=0;

function disableScrollOnBody()
    y_offsetWhenScrollDisabled= $(window).scrollTop();
    $('body').addClass('scrollDisabled').css('margin-top', -y_offsetWhenScrollDisabled);

function enableScrollOnBody()
    $('body').removeClass('scrollDisabled').css('margin-top', 0);
    $(window).scrollTop(y_offsetWhenScrollDisabled);




Another way 



.stop-scrolling 
  height: 100%;
  overflow: hidden;



$('body').addClass('stop-scrolling')

【讨论】：

非常感谢您的回答，但在 next.js 样板上通常不会与 jQuery 库混淆。

嘿，您可以通过谷歌搜索上述函数将 jquery 更改为 next.js，例如 $(window).scrollTop() 将是 componentDidMount() window.addEventListener('scroll', this.onScroll ， 错误的）; componentWillUnmount() window.removeEventListener('scroll', this.onScroll, false);