Vue.js 2 template

by luka kupunia

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

<div id="app">
  <button @click="goto('porto')">Go to porto</button>
  <div class="page" ref="london">
    London page
  </div>
  <div class="page" ref="porto">
    Porto page
  </div>
  </div>
</div>

CSS

html {
  scroll-behavior: smooth;
}
.page {
  height: 1000px;
  padding: 20px;
  border: 2px solid yellow;
}

Babel + JSX

new Vue({
  el: '#app',
  methods: {
    goto(refName) {
    	var element = this.$refs[refName];
      console.log(element);
      var top = element.offsetTop;
      
      window.scrollTo(0, top);
    }
  }
})