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

【问题标题】：Next.js maintain scroll position when page RoutingNext.js 在页面路由时保持滚动位置
【发布时间】：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> 时，我不想移动滚动位置。但如您所知，当新页面被路由时，它会移动到顶部。有没有人知道在加载新页面时保持滚动位置。

【问题讨论】：

标签： javascript next.js scroll-position

【解决方案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); }