JSFiddle - React, Tailwind, and code Playground

by Asif Sharif Shahid

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.7/vue.min.js"></script>

<div id="app">
  <div>
    <button @click="goto('porto')">Go to Porto</button>
  </div>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <div v-el:porto class="fl-porto page">
          <div class="fl-events">
            <h2>Events in Porto</h2>
          </div>
  </div>
</div>

CSS

.page {
  height: 1000px;
  padding: 20px;
  border: 2px solid yellow;
}

JavaScript

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