在Next.js网站上的浏览器后退按钮上保持上一页滚动位置

lhcgjxsq 于 2023-04-05 发布在其他

关注(0)|答案(2)|浏览(246)

当我使用Next.js Link标签从A页导航到B页并单击浏览器后退按钮时，A页滚动到顶部。如何保留A页的滚动位置？
你可以在我的next.js博客上测试一下。滚动到this page的底部，点击一个文章链接，然后点击浏览器的后退按钮，它会滚动到顶部，而不是保留滚动位置。
源代码：https://github.com/GorvGoyl/Personal-Site-Gourav.io

next.js

来源：https://stackoverflow.com/questions/75854545/maintain-previous-page-scroll-position-on-browser-back-button-on-next-js-site

2条答案

按热度按时间

taor4pac1#

通过将此标志添加到next.config.js来修复它

experimental: {
      scrollRestoration: true,
    },

赞(0）回复(0）举报 2023-04-05

kdfy810k2#

您可以尝试实现分页并合并Link组件

import Link from 'next/link'
    
function PageLink({ pageNumber, currentPage }) {   
const isActive = pageNumber === currentPage   
const href = isActive ? null : `/blog?page=${pageNumber}`   

return (
        <Link href={href}>
          <a className={isActive ? 'active' : null}>{pageNumber}</a>
        </Link>   ) 
}

您还可以使用路由器定义总页数并返回特定的页码。

function Blog({ posts }) {
  const perPage = 10
  const totalPosts = posts.length
  const totalPages = Math.ceil(totalPosts / perPage)
  const router = useRouter()
  const currentPage = parseInt(router.query.page) || 1
  const startIndex = (currentPage - 1) * perPage
  const endIndex = startIndex + perPage
  const currentPosts = posts.slice(startIndex, endIndex)
  
  return (
    <div>
      {currentPosts.map(post => (
        // render each post
      ))}
      <div className="pagination">
        {Array.from({ length: totalPages }, (_, i) => i + 1).map(pageNumber => (
          <PageLink key={pageNumber} pageNumber={pageNumber} currentPage={currentPage} />
        ))}
      </div>
    </div>
  )
}

或者，您可以将“prerender”添加到 meta标记中，以缓存页面的内容，并且在用户返回页面时不会再次获取它。

<Head>
    <meta name="prerender-status-code" content="200" />
    <meta name="prerender" content="true" />
</Head>

赞(0）回复(0）举报 2023-04-05

我来回答

在Next.js网站上的浏览器后退按钮上保持上一页滚动位置

2条答案

相关问题

热门标签

最新问答