Vue-router How to come back to a specific section of the home page?

Question

I have ci-urrently a home page with many sections taht the user can access by scrolling or from a navbar menu-1. In this menu there is also a "Plus" button to request additional pages from the router

All pages called from a router have a navbar menu-2 to call other pages from the router or go back to the home page

It"s working fine...

but I would like to be able from this pages to go back to a specific section of the home page;..

I tried to use :

              <div class="navbar-text">
              <!-- Button trigger modal-->
              <div class="dropdown">
                  <button class="dropbtn">PLUS...</button>
                  <div class="dropdown-content">
                      <a @click="$router.push('/home#about-us')">ABOUT US</a>
                      <a @click="$router.push('/home#memberships')">MEMBERSHIPS</a>
                      <a @click="$router.push('/hoem#events')">EVENTS</a>
                      <a @click="$router.push('/home#portfolio')">PORTFOLIO</a>
                      <a @click="$router.push('/home#leaders')">LEADERS</a>
                      <a @click="$router.push('/home#contact')">CONTACT</a>
                  </div>
              </div>
          </div>

but no way .. I'm always back to the top of the home page ...

any trick ? thanks for feedback

Answer 1

Check out Vue Router - Scroll Behavior from the docs:

When using client-side routing, we may want to scroll to top when navigating to a new route, or preserve the scrolling position of history entries just like real page reload does. vue-router allows you to achieve these and even better, allows you to completely customize the scroll behavior on route navigation.

Specially the code before Async Scrolling section

Answer 2

updated the scrollBehavior in my router index.js

  scrollBehavior (to, from, savedPosition) {
    if (to.hash) {
      return {selector: to.hash}
    } else if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }