How to go automatically at the bottom of a page without scrolling down when a new div appears in Vue application styled with Tailwind?

Question

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>

score 1 · Answer 1 · answered Nov 03 '21 at 14:05

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

How to go automatically at the bottom of a page without scrolling down when a new div appears in Vue application styled with Tailwind?

1 Answers1