Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Navigating to a new route or different query params does not scroll to top

See original GitHub issue

Environment

Operating System: Darwin
Node Version: v16.17.0
Nuxt Version: 3.0.0-rc.13
Nitro Version: 0.6.1
Package Manager: yarn@1.22.19
Builder: vite
User Config: nitro
Runtime Modules: -
Build Modules: -

Reproduction

https://github.com/chrisnoden/nuxt3-bug

In short. Create a project with only nuxt rc.13 as a dependency. Create a couple of pages which are longer than the viewable height of the browser. Put links to the pages down below the fold.

Scroll down to click on one of the links. The new page loads but the scroll position is still at the bottom of the page. This is not what anyone expects when navigating to a new “page”. Scroll position should only be controlled by inclusion of a # in the URL typically.

This bug has been around since rc.7 at least.

Describe the bug

The user expects when clicking a link to a new “page” that the page will appear with the scroll position at the top of the page. For example, if you have a long page and click on a link in the footer, you may not notice the page content has changed because you can still only see the footer.

Additional context

No response

Logs

No response

Issue Analytics

State:
Created a year ago
Reactions:2
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

richgcookcommented, Nov 7, 2022

Thanks @danielroe – so this would be merged in rc14 or stable?

0reactions

manniLcommented, Nov 7, 2022

@richgcook And you can try it out on the edge channel already!

Top Results From Across the Web

angular - How to prevent scrolling to top after removing query ...

I have set up a new application. When a route changes (normally) I want to scroll to the top of the page. I...

Deep dive into Angular Routing — Scrolling to top, Debugging ...

The very first thing to do is set enable an anchorScrolling option in the router configuration. This is used to scroll to any...

ScrollRestoration v6.6.1 - React Router

This component will emulate the browser's scroll restoration on location changes after loaders have completed to ensure the scroll position is restored to ......

router query params vue | The AI Search Engine You Control

I just found an answer for this. Here's my code. The default behaviour will scroll to top, unless you pass a custom params...

next/router | Next.js

pathname : String - The path for current route file that comes after /pages . Therefore, basePath , locale and trailing slash (...