<div
id="app"
style="height:300vh; background:green; display: flex; flex-direction: column; justify-content: space-between; align-items: center;"
>
<button style="font-size: 1em; cursor:pointer;" @click="scrollToBottom">
Click to Scroll
</button>
<h1 ref="bottom">Bottom</h1>
</div>const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
scrollToBottom(){
this.$refs['bottom'].scrollIntoView({behavior: "smooth"})
}
}
})
External CSS
This Pen doesn't use any external CSS resources.