Allow scroll-to-top with shallow routing

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>
  );
}

[Alexn117]

I experienced this today as well. Although there are cases where with shallow routing one might not want the page to scroll up, I think there are some where it’s convenient. For example, using shallow routing to change pages via query string params (for frontend pagination without refetching data).

<Link href="/posts?page=2" shallow>
  <a>Naturally start new page at the top</a>
</Link>

The docs currently say that the default behavior is to obey scroll to top, but this is not happening with shallow set to true at the moment.

The default behavior of Link is to scroll to the top of the page.

[chrisneven]

Seeing the same “issue” here, although I can understand why it was made to behave this way. We have one case where scrolling to the top is exactly what we want, because the content being swapped is near the top of the page.

On the other hand, we have a different case where the paginated content lives much further down the page. In that scenario, we actually don’t want to scroll all the way to the top of the page, because that would blow way past the content being refreshed and would be even worse than staying in the same spot.

IMO, the “safest” thing to do is append an anchor link (ex. #post-results) at the end of the shallow URL:

<Link href="/posts?page=2#post-results" shallow>
  <a>Naturally start new page at the top</a>
</Link>

That way you have full control of exactly where the browser should scroll upon clicking the shallow link. In this case, we may want to scroll up a bit to where the list of posts begins.

It’s a bit more work, but it’s the only reasonable approach because only you know where that particular content actually starts on the page.

IMO the scroll option should just take precedence over opinionated default behavior when it’s explicitly set.