Nuxt.js: 'scrollToTop' not working

[dennerkrans]

When navigating between the pages it seems to always maintain the same position as before. I've set 'scrollToTop: true' for all pages (even though that is done by default), and for my dynamic page that loads data from the vuex store.

The router setup looks as follows

export default new Router({
  mode: 'history',
  base: '/',
  linkActiveClass: 'nuxt-link-active',
  scrollBehavior,
  routes: [
        {
            path: "/",
            component: _628e917c,
            name: "index"
        },
        {
            path: "/studio",
            component: _e2b616c8,
            name: "studio"
        },
        {
            path: "/contact",
            component: _2afe8d6c,
            name: "contact"
        },
        {
            path: "/:projects/:slug?",
            component: _17dc14fe,
            name: "projects-slug"
        }
  ]
})

Any help would be very appreciated 😄 Awesome work with nuxt btw.

_{This question is available on Nuxt.js community (#c166)}

[Atinux]

@dennerkrans can you share the full .nuxt/router.js file please?

[dennerkrans]

@Atinux
`'use strict'

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const _628e917c = process.BROWSER_BUILD ? () => System.import('/Users/danieldennerkrans/Workspace/daniel/daniel-nuxt/pages/index.vue') : require('/Users/danieldennerkrans/Workspace/daniel/daniel-nuxt/pages/index.vue')

const _e2b616c8 = process.BROWSER_BUILD ? () => System.import('/Users/danieldennerkrans/Workspace/daniel/daniel-nuxt/pages/studio.vue') : require('/Users/danieldennerkrans/Workspace/daniel/daniel-nuxt/pages/studio.vue')

const _2afe8d6c = process.BROWSER_BUILD ? () => System.import('/Users/danieldennerkrans/Workspace/daniel/daniel-nuxt/pages/contact.vue') : require('/Users/danieldennerkrans/Workspace/daniel/daniel-nuxt/pages/contact.vue')

const _17dc14fe = process.BROWSER_BUILD ? () => System.import('/Users/danieldennerkrans/Workspace/daniel/daniel-nuxt/pages/_projects/_slug.vue') : require('/Users/danieldennerkrans/Workspace/daniel/daniel-nuxt/pages/_projects/_slug.vue')

const scrollBehavior = (to, from, savedPosition) => {
// savedPosition is only available for popstate navigations.
if (savedPosition) {
return savedPosition
} else {
let position = {}
// if no children detected
if (to.matched.length < 2) {
// scroll to the top of the page
position = { x: 0, y: 0 }
}
else if (to.matched.some((r) => r.components.default.options.scrollToTop)) {
// if one of the children has scrollToTop option set to true
position = { x: 0, y: 0 }
}
// if link has anchor, scroll to anchor by returning the selector
if (to.hash) {
position = { selector: to.hash }
}
return position
}
}

export default new Router({
mode: 'history',
base: '/',
linkActiveClass: 'nuxt-link-active',
scrollBehavior,
routes: [
{
path: "/",
component: _628e917c,
name: "index"
},
{
path: "/studio",
component: _e2b616c8,
name: "studio"
},
{
path: "/contact",
component: _2afe8d6c,
name: "contact"
},
{
path: "/:projects/:slug?",
component: _17dc14fe,
name: "projects-slug"
}
]
})`

[dennerkrans]

It turned out to be a styling related bug, where a mixin added some styling to the body that lead to window.scrollY, and document.body.scrollTop to always equal 0. Sorry for any inconvenience.

[fortil]

@dennerkrans How you resolved the problem?
I believe that I have the same problem, doesn't work scrollToTop neither window.scrollTo(0,0)

I use vuetify and nuxt

[fortil]

I found the problem

The problem is the code /assets/css/main.css in the template this have a code

html, body
{
  background-color: #fff;
  color: #000;
  letter-spacing: 0.5px;
  font-family: "Source Sans Pro", Arial, sans-serif;
  height: 100vh;
  margin: 0;
}

In chrome when you have height: 100% or 100hv doesn't work scrollTo, I don't know why.

[hookkent]

@fortil

Have you solved it, please? I have the same problem.

[northamerican]

height: 100vh even on my main #app element in default.vue causes issues with scrolling to the top.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.