nuxt: scrollToTop not working for `_slug` style routes

This is still an issue.

Today while i was working on a nuxt ts project, i was amazed with the behavior of a css element.

which is overflow-x: hidden on html and body tag.

As a result nuxt js scrollToTop behavior was not working.

To fix the issue i had to put another div on layouts file with width:100vw and overflow-x: hidden

<template>
  <div class="remove-x-overflow">
    <Header />
    <b-container fluid class="base-padding-container">
      <Nuxt />
    </b-container>
    <Footer />
  </div>
</template>

<style lang="scss">
html,
body {
  font-family: sans-serif;
  height: 100%;
}

.base-padding-container {
  padding-right: 0rem !important;
  padding-left: 0rem !important;
}
.remove-x-overflow {
  max-width: 100vw;
  overflow-x: hidden;
}
</style>

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 }
    }
  },

what happened ? I have same issue , I could not find any closed issue for this problem

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.

Why is this issue closed, it’s clearly not resolved ?

Still having the same issue 😦 I’m not doing anything fancy either. Just basic <nuxt-link to="/blah"> and even when I set scrollToTop on any route it doesn’t do anything.

@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

@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

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

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

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