<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.

Need Help With Vue Development?

Work with our skilled Vue developers to accelerate your project and boost its performance.

Hire Vuejs Developers

Support On Demand!

Related Q&A