Nuxt.js: scrollToTop not working for `_slug` style routes

[rwwagner90]

Version

v2.4.5

Reproduction link

https://github.com/shipshapecode/website-nuxt

Steps to reproduce

If you run yarn dev and navigate to the blog route, then click a blog post, then scroll to the bottom, and click one of the next/previous links, you will notice it will drop you at the same scroll position as the post you navigated from, rather than resetting the scroll position.

You can also see this reproduced, without needing to pull down code if you go to https://shipshape.io/blog/ad-hoc-relationships-with-ember-data/ and click the next/previous links at the bottom.

What is expected ?

scrollToTop should be respected and the scroll position should be reset, when following links, and maintained when using the back button.

What is actually happening?

The scroll is not reset, and you are put at the same scroll position as the previous post.

_{This bug report is available on Nuxt community (#c8772)}

[hamid-ne]

Hi brother
add this code at root of nuxt.config.js file to fix scroll

  router: {
    scrollBehavior: function (to, from, savedPosition) {
      return { x: 0, y: 0 }
    }
  },

[rwwagner90]

@HamidNE that will always scroll to the top though, right? I want the savedPosition to work too. It should work as intended in the browser, and scroll to the top when you navigate to a new route via links, but retain scroll position when using back buttons etc.

[rwwagner90]

Either way, this is a bug in Nuxt, and should be addressed, rather than needing a workaround.

[rwwagner90]

router: {
    scrollBehavior(to, from, savedPosition) {
      if (savedPosition) {
        return savedPosition;
      }

      return { x: 0, y: 0 };
    }
  },

This kind of works, as it will keep the saved position, but it does not correctly do the transition animations.

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as 🕐Pending will not be automatically marked as stale.

[rwwagner90]

This is still an issue.

[rwwagner90]

@manniL does pending mean there is a fix in progress?

[manniL]

@rwwagner90 No, pending means it is an "acknowledge"/"repro-able" bug.

[arkhamvm]

I suppose that problem in window.$nuxt.$once('triggerScroll', triggerScrollCallback). Cause triggerScrollCallback not even called.

[siblanco]

Use setTimeout instead of window$.nuxt.$once. That works for me

[arkhamvm]

Any bugfix pls?

@siblanco setTimeout doesn't related to page load, so in case of long page load, it will be scrolled earlier.

I use nextTick now, but it have side effects:

return new Promise((resolve) => {
    (window as any).$nuxt.$nextTick(() => {            // first tick for asyncData call
        (window as any).$nuxt.$nextTick(() => {    // second tick for page render
            if (to.hash && document.querySelector(to.hash)) {
                position = {selector: to.hash};
            }
            resolve(position);
        });
    });
});

[pimlie]

@rwwagner90 Does this issue still exist for you when you disable your custom scrollBehavior? I cant seem to replicate this anymore on your repo when I remove your custom scrollBehavior

[arkhamvm]

@rwwagner90 Does this issue still exist for you when you disable your custom scrollBehavior? I cant seem to replicate this anymore on your repo when I remove your custom scrollBehavior

Nuxt 2.8.1 issue still exist.

[pimlie]

@arkhamvm I am not sure you are experiencing the same issue, can you create a reproduction of your issue?

[arkhamvm]

@pimlie

1. Open page, scroll down
2. Click on <nuxt-link>
3. Page doesn't scroll to top { x: 0, y: 0 }
4. Scroll up or down
5. Press "Back" in browser
6. Page doesn't scroll to saved position

[arkhamvm]

@pimlie as i say earlier triggerScrollCallback doesn't called.

[pimlie]

@arkhamvm which codebase?

[arkhamvm]

@pimlie Sorry, i dont understand what you mean. I'm talking about this sample (as sayed it should be run as default): https://nuxtjs.org/api/configuration-router#scrollbehavior

[pimlie]

@arkhamvm Please share a working reproduction where triggerScrollCallback _doesnt_ work. I tested the behaviour you mentioned and that works for me correctly.

Without a working reproduction of the problem there is no issue thus also no fix necessary.

There was an issue though with scrollBehaviour when navigating on the same pagewith hashes, see here for a fix: https://github.com/nuxt/nuxt.js/pull/6012

[rwwagner90]

@pimlie it does appear the scroll issue has been fixed, however, the animations do not trigger from one blog post to another.

[arkhamvm]

@pimlie Sorry, it's look like i'm misunderstood how <transition> works.
If <nuxt /> is wrapped into <transitional>, triggerScroll will not called.
Example: https://codesandbox.io/embed/example-custom-routes-x7lvs
Take a look at layouts/default.vue

[pimlie]

@arkhamvm Thanks. Why do you need to wrap nuxt in a transition? Nuxt already support transitions by default for layouts and pages.

What probably happens under the hood is that the transition you added is 'blocking' the transition used in nuxt-child, becuase of that the beforeEnter event is never triggered on nuxt-child thus the triggerScroll event is not fired. See here if you are interested in the code: https://github.com/nuxt/nuxt.js/blob/dev/packages/vue-app/template/components/nuxt-child.js

@rwwagner90 Hmm yes, seems so. Could you please create a new issue for that?

[rwwagner90]

@pimlie sure I can make a new issue. Should we close this one?

[pimlie]

Yes, sounds like a good idea.

If someone else still has a problem with scrolling please open a new issue :)