Next.js maintain scroll position when page Routing

javascript next.js scroll-position
LeeMinHo picture LeeMinHo · Jan 6, 2020 · Viewed 16.7k times · Source

I am currently making a web site on Next.js boilerplate.

My routing code is this. (below)

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>

when I click this <Button> I do not want scroll position to be moved. But as you know, it moves to the top when the new page is being routed. Does anyone have any idea about maintaining scroll position when the new paged is being loaded.

Answer

Manuel Bichler picture Manuel Bichler · Feb 4, 2020 
<Link scroll={false} href="/"><a>Home</a></Link>

scroll={false} will disable the scroll to top on page changes for that specific link.

Reference: https://github.com/zeit/next.js/issues/3950

Related questions

Window is not defined in Next.js React app

In my Next.js app I can't seem to access window: Unhandled Rejection (ReferenceError): window is not defined componentWillMount() { console.log('window.innerHeight', window.innerHeight); }

Read More
Next.js - import css file does not work

I am creating a project with react, redux and next.js, and want to import CSS files in js. I followed instructions in next.js/#css and next-css, but find out that CSS styles do not work. My code is …

Read More
I can't reference an image in Next.js

I have a React component that's being used in Next.js page: /pages/index.js import React from 'react'; import ReactDOM from 'react-dom'; import Layout from "../src/hoc/Layout/Layout"; import Main from "../src/components/Main/Main"; const Index = () => ( &…

Read More