'NuxtJs Scroll Behavior issue

I have a couple of issues with scroll behavior in my Nuxt application. I have 3 pages Home, Individual posts and category page

  1. When I am moving from home page to the individual posts page there is a scroll transition from the bottom to the top of the page, what I am trying to achieve is when I switch to the individual page, the scroll bar should be default at the top and not the scroll animation.

  2. When I click the back button from the Individual posts page it's not taking me to the saved Position of the Home Page.

  3. When I am on the category1 page, If I scroll a little down and click on 2nd category, Again I am seeing the bottom to top page scroll issue. Ideally, it should default to the top when we switch pages (I am using asyncdata this I've tested with fetch method, with fetch it works perfectly )

  4. If I click the back button from category2 it takes me to the saved position of category1 page which is correct but again I am seeing top to bottom scroll behavior, it should go to the saved position Instantly without any scroll animation.

  5. If I click Individual post link from the category page and click back button from the Individual page,it's not taking me to the saved Position of the category page (scroll is getting stuck in between)

Its really hard for me to explain this, this is a 30 second video link, for better understanding.

I have tried scrollToTop and tried to modify default scroll behavior.

export default function (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  }
  return { x: 0, y: 0 }
}

This is my Git repo link for this Nuxt project. Please Guide. Thanks



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source