Scroll to id in another component

I have a simple navbar with a link to a new component, but I want to scroll to a specific element in that component when opened.

The route in router.js

{
      scrollBehavior: function(to, from, savedPosition) {
        if (to.hash) {
          return {selector: to.hash}
        } else {
          return {x: 0, y: 0}
        }
      },
      path: '/info',
      name: 'Info',
      component: Info
    },

The component has an element with id = section8

 .................
  <h3>Section 8</h3>
  <div class="" id="section8">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>
</template>

<script>
export default {
  name: 'Info',
  data() {
    return {
      name: "Info"
    }
  }
}
</script>

The home page template has a link

<b-nav-item class="mr-md-5" to="/info#section8"><strong>Info</strong></b-nav-item>

<template>
<div class="hello">
  <b-navbar navbar-light bg-light toggleable="md" fixed="top">
    <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
    <b-collapse is-nav id="nav_collapse">
      <b-navbar-nav class="w-100">
        <b-navbar-nav align="right">
          <b-nav-item class="mr-md-5" to="/"><strong>Home</strong></b-nav-item>
          <b-nav-item class="mr-md-5" to="/about"><strong>About</strong></b-nav-item>
          <b-nav-item class="mr-md-5" to="/info#section8"><strong>Info</strong></b-nav-item>
        </b-navbar-nav>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
  <div>
    <router-view></router-view>
  </div>
</div>
</template>

How can I get the click to scroll to the id in the component?

The project’s full code is on Github and a running demo on gh-pages.

Any help would be greatly appreciated,

Thanks,

The problem is that the function in your route is misplaced.

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

Yes I see now,

https://router.vuejs.org/guide/advanced/scroll-behavior.html#async-scrolling

It should be,

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ '@/components/About.vue')
    },
    {
      path: '/info',
      name: 'Info',
      component: Info
    },
  ],
  scrollBehavior: function(to, from, savedPosition) {
    if (to.hash) {
      return {selector: to.hash}
    } else {
      return {x: 0, y: 0}
    }
  },
})

Thanks for your help.

It is working now.