Vue.js - scrolling to anchor tags within page

by Mani Jagadeesan

HTML

<script src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@2.0.1"></script>
<body>
  <div id="app">
    Note: This fiddle works only locally. jsFiddle does not support mode:'history' in router
    <router-view></router-view>
  </div>
</body>

CSS

body {
  margin: 20px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

p {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #DDD;
}

JavaScript

const ParagraphsComponent = Vue.component("my-paragraphs", {
  template: `
        <div>
            <h1>My paragraphs component</h1>
            <p id="p1">paragraph 1 <a href="#p10">Jump to 10</a></p>
            <p id="p2">paragraph 2</p>
            <p id="p3">paragraph 3</p>
            <p id="p4">paragraph 4</p>
            <p id="p5">paragraph 5</p>
            <p id="p6">paragraph 6</p>
            <p id="p7">paragraph 7</p>
            <p id="p8">paragraph 8</p>
            <p id="p9">paragraph 9</p>
            <p id="p10">paragraph 10</p>
            <p id="p11">paragraph 11</p>
            <p id="p12">paragraph 12</p>
            <p id="p13">paragraph 13</p>
            <p id="p14">paragraph 14</p>
            <p id="p15">paragraph 15</p>
        </div>
    `
});
const HomeComponent = Vue.component("my-home", {
  template: `
        <div>
            <h1>My home component</h1>
            <p><router-link to="/paragraphs">Jump to paragraphs (top)</router-link></p>
            <p><router-link to="/paragraphs#p12">Jump to paragraph 12</router-link></p>
            <p><router-link to="/paragraphs#p14">Jump to paragraph 14</router-link></p>
        </div>
    `
});

const ROUTER_INSTANCE = new VueRouter({
  mode: 'history',
  scrollBehavior: function(to, from, savedPosition) {
    if (to.hash) {
      return {selector: to.hash}
    } else {
      return {x: 0, y: 0}
    }
  },
  routes: [{
    path: '/',
    component: HomeComponent
  }, {
    path: '/paragraphs',
    component: ParagraphsComponent
  }]
});

new Vue({
  el: '#app',
  router: ROUTER_INSTANCE
});