Next.js - router.push without scrolling to the top

Question

I am using router from next by importing useRouter from next/router.

I am trying to find a solution which will not scroll to the top of the page when I change the query of the URL. Is there any solution? I know that Link component from Next has that option, but I need to use Router component. My next version is 10.0.5.

const router = useRouter();

const changeCurrency = (newCurrency) => {
   //Do some stuff here

    Router.push({
        pathname: router.pathname,
        query: { ...router.query, currency: newCurrency.value },
    });
};

Answer 1

router.push has a scroll option, it is true by default. You can turn it off like this:

const router = useRouter();

async function navigate(newCurrency) {
  router.push({
    pathname: router.pathname,
    query: { ...router.query, currency: newCurrency.value },
  }, undefined, { scroll: false });
}

router.push accepts the most of (if not all) next/link's props in the options object. You can check them here: https://nextjs.org/docs/api-reference/next/link

Answer 2

if you like to use router.push directly with given destination path including the query values ,

and preventing scroll to top, you can use also :

router.push(`/?page=2`, undefined, { scroll: false });

this is just example , and change it based on you case/ requirements.

i hope the helpful

Answer 3

A weird workaround from me. Just get the particular component in the view. Here's how.

import React, { useEffect, useRef } from 'react';


function MyAccount() {
  const containerRef = useRef(null);

  useEffect(() => {
    setTimeout(() => {
      containerRef.current.scrollIntoView({ behavior: 'smooth' });
    }, 250);
  }, []);

  return (
    <div ref={containerRef}>
   {/* It will be your particular component that needs to be shown  */}
        <UserInformation /> 
    </div>
  );
}

export default MyAccount;

Some people may find it useful! That's why I posted this here. scroll=false is the best solution if you want to retain view.