9

我目前正在 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>不想移动滚动位置。但如您所知，当新页面被路由时，它会移动到顶部。有没有人知道在加载新页面时保持滚动位置。

4

3 回答 3

20 
<Link scroll={false} href="/"><a>Home</a></Link>

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

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

于 2020-02-04T13:55:03.120 回答
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>

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

于 2020-01-06T05:53:34.533 回答
-10 

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')

于 2020-01-06T05:39:04.173 回答