In my Nuxt/Vue application with Tailwind, by clicking on one element I am uncovering the next element. It works fine but the user needs to scroll down to see the new element. How can I make my app to go straight away to the bottom of the page to see the new element without scrolling down ??
<template>
<div @click="onClick">
<Element/>
</div>
<div v-if="Section > 0" @click="onClick">
<Element/>
</div>
<div v-if="Section > 1" @click="onClick">
<Element/>
</div>
</template>
<script>
export default {
data() {
return {
Section: 0
}
},
methods: {
onClick() {
this.Section++
}
</script>
You can do it by referencing the divs and then using window.scrollTo to scroll to them (or at the bottom of the page).
Just an example of how you can do it (your code modified):
<template>
<div @click="onClick('section0')" ref="section">
<Element/>
</div>
<div v-if="Section > 0" ref="section0" @click="onClick('section1')">
<Element/>
</div>
<div v-if="Section > 1" ref="section1" @click="onClick('nextSectionRef')">
<Element/>
</div>
</template>
<script>
export default {
data() {
return {
Section: 0
}
},
methods: {
onClick(refName) {
this.Section++;
var element = this.$refs[refName];
var top = element.offsetTop;
window.scrollTo(0, top);
}
</script>
This will help you to understand it better: https://shouts.dev/vuejs-scroll-to-elements-on-the-page
This also might answer your question: Scroll to bottom of div with Vue.js