Bacancy Technology

Bacancy Technology represents the connected world, offering innovative and customer-centric information technology experiences, enabling Enterprises, Associates and the Society to Rise™.

12+

Countries where we have happy customers

1050+

Agile enabled employees

World wide offices

12+

Years of Experience

Agile Coaches

Certified Scrum Masters

1000+

Clients projects

1458

Happy customers

Vue

June 27, 2023

How to Make Vue.js Scroll Up on Button Click?

<template>
  <div class = "main-logo">
      <b-button class = "logo-img" pill variant="danger"   v-on:click="greet()">some text</b-button>
  </div>
</template>

<script>
export default {
  name: 'main-logo',
  methods: {
      greet: function () {
        let elementToScroll = document.getElementById("mainboard");
        elementToScroll.scrollBy({
            top: 0,
            behavior: "smooth",
         });
      }
  }
}
</script>

<style scoped>
.main-logo {
  position: fixed;
  width: 100vw;
  padding-top: 60px;
  padding-bottom: 60px;
  background: goldenrod;
  z-index: 1;
}
</style>

Explanation

On call of greet first it will find the element from the DOM on which you want to scroll up.
Here I have the user `mainboard` as an ID. if any changes are there you can update your ID over here.
Now with the help of scrollBy function call on element I am passing a few arguments with it.
First is the direction with the value. As we want to move up I have a user `top` with 0 value,
Second, I have added `behavior` with a `smooth` value to make the scroll look animated while going up from bottom.