Vue element scroll

by Lloyd Atkinson

HTML

<div id="app">
  <button @click="scroll('first')">
    First
  </button>
  <button @click="scroll('second')">
    Second
  </button>
  <button @click="scroll('third')">
    Third
  </button>
  <button @click="scroll('fourth')">
    Fourth
  </button>
  
  <div class="block red" ref="first">
    First
  </div>
  <div class="block yellow" ref="second">
    Second
  </div>
  <div class="block green" ref="third">
    Third
  </div>
  <div class="block blue" ref="fourth">
    Fourth
  </div>
</div>

CSS

.block {
  height: 300px;
}

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

Vue

new Vue({
  el: "#app",
  methods: {
  	scroll: function (ref) {
    	this.$refs[ref].scrollIntoView({ behavior: 'smooth' });
    }
  }
})