The Wayback Machine - https://web.archive.org/web/20210304115430/https://github.com/vercel/next.js/issues/21606
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow scroll-to-top with shallow routing #21606

Open
stefanprobst opened this issue Jan 27, 2021 · 3 comments
Open

Allow scroll-to-top with shallow routing #21606

stefanprobst opened this issue Jan 27, 2021 · 3 comments

Comments

@stefanprobst
Copy link
Contributor

@stefanprobst stefanprobst commented Jan 27, 2021

What version of Next.js are you using?

10.0.6-canary.9

What version of Node.js are you using?

14.15.4

What browser are you using?

Firefox 84

What operating system are you using?

Ubuntu 20.04

How are you deploying your application?

Vercel

Describe the Bug

Recently (i think 10.0.6-canary.8) the behavior for shallow routing was changed to not scroll-to-top anymore. While this makes sense as a default behavior, it should still be possible to force scrolling by providing <Link shallow scroll> or router.push(path, undefined, { shallow: true, scroll: true ).

Expected Behavior

<Link shallow scroll> and router.push(path, undefined, { shallow: true, scroll: true ) should scroll to top.

To Reproduce

// pages/index.js
import Link from "next/link";

export default function Home() {
  return (
    <main>
      <h1>Scroll down</h1>
      <div style={{ marginTop: "120vh", padding: "60px" }}>
        <Link href={{ query: { filter: "new" } }} shallow scroll>
          <a>Click me</a>
        </Link>
      </div>
    </main>
  );
}
@timneutkens
Copy link
Member

@timneutkens timneutkens commented Jan 28, 2021

Feel free to send a PR.

@jigsawpieces
Copy link

@jigsawpieces jigsawpieces commented Jan 31, 2021

This functionality already exists but the official docs has not been updated yet. See #20606 for more information.

You can do:

router.push(path, path, { scroll: false })

to disable the auto scroll.

@stefanprobst
Copy link
Contributor Author

@stefanprobst stefanprobst commented Jan 31, 2021

For shallow routing, this is no longer true with v10.0.6. see #21437

@vercel vercel deleted a comment Feb 6, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
4 participants