How to Scroll to the Bottom of the Page in a Vue App

We can use the vue-scrollto package to scroll down to the bottom of a page.

First, we install it by running:

npm install --save vue-scrollto

Next, we register it in main.js:

import Vue from "vue";
import App from "./App.vue";
const VueScrollTo = require("vue-scrollto");

Vue.use(VueScrollTo);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

We called the Vue.use method to register it.

Then in App.vue, we write:

<template>
  <div id="app">
    <a href="#" v-scroll-to="`#num-${nums[nums.length - 1]}`">scroll to bottom</a>

    <div :id="`num-${n}`" v-for="n of nums" :key="n">{{n}}</div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      nums: Array(100)
        .fill()
        .map((_, i) => i)
    };
  }
};
</script>

In the code above, we created the nums array with the Array constructor, fill and map methods.

Then in the template, we have an a element that scrolls to the element at the bottom of the page with the v-scroll-to prop’s value.

We set its value to the ID of the div at the bottom of the page.

Then below it, we have 100 divs with the id prop that’s dynamically set to the ID num and the value of n.

Now, when we click on the a element, then it’ll scroll to the bottom of the page because the ID is set to the ID of the div at the bottom of the page.