Vue.js vue-scrollto Example to Scroll to Specific Div Element in Browser Using Javascript

Welcome folks today in this blog post we will be using the vue-scrollto library to scroll to specific div element in browser using vue.js. All the full source code of the application is shown below.

Get Started

In order to get started you need to make an index.html file and copy paste the following code

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue ScrollTo Example</title>
  </head>
  <body>
    

    <!-- include Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- include VueScrollTo -->
    <script src="https://cdn.jsdelivr.net/npm/vue-scrollto"></script>   
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Vue ScrollTo Example</title>

</head>

<body>

</body>

</html>

As you can see we have included all the cdn of all the libraries including the vue.js and the vue-scrollto and now I will be showing you the different ways to automatically scroll to specific div in the DOM.

Using vue-scroll-to Directive

The easiest way to bind the vue-scroll-to directive to a button and it will automatically scroll to the targetelement here you need to provide the id of the element as shown below

 <div id="app">
      <button v-scroll-to="'#my-element'">Scroll to Element</button>

      <div style="height: 1000px;"></div>
      <div id="my-element">This is the target element</div>
    </div>

<button v-scroll-to="'#my-element'">Scroll to Element</button>

<div id="my-element">This is the target element</div>

</div>

Using Vue.js Code Dynamically

Now I will show you the preferred way of dynamically binding the scroll to feature using the vue.js code as shown below. For this you need to bind the onClick listener to the button as shown below

<div id="app">
      <button @click="scrollToElement">Scroll to Element</button>

      <div style="height: 1000px;"></div>
      <div id="my-element">This is the target element</div>
    </div>

<button @click="scrollToElement">Scroll to Element</button>

<div id="my-element">This is the target element</div>

</div>

Now we need to define the scrollToElement method inside the vue.js as shown below

<script>
      // initialize Vue app
      new Vue({
        el: '#app',
        methods: {
          scrollToElement() {
            VueScrollTo.scrollTo('#my-element', 500, {
              easing: 'ease-in-out',
              offset: -100,
              force: false,
              cancelable: true,
              onStart: function () {
                console.log('Scroll started');
           
              },
              onDone: function () {
                console.log('Scroll finished');
              },
              onCancel: function () {
                console.log('Scroll canceled');
              },
              x: false,
              y: true
            });
          }
        }
      });
    </script>

// initialize Vue app

new Vue({

el: '#app',

methods: {

scrollToElement() {

VueScrollTo.scrollTo('#my-element', 500, {

easing: 'ease-in-out',

offset: -100,

force: false,

cancelable: true,

onStart: function () {

console.log('Scroll started');

onDone: function () {

console.log('Scroll finished');

onCancel: function () {

console.log('Scroll canceled');

x: false,

y: true

});

}

});

</script>

As you can see we have initialized the vue.js app and then we have defined the method and inside it we are calling the scrollTo() method and here we are passing the element id to which we need to scroll to and then we can even pass additional options such as delay in milliseconds to reach the element. And then type of animation used. And also callback functions for start and stop the scrolling.

Scroll to Top Button

Using the same functionality we can make a handy scroll to top button inside the website for the visitors to easily go to top when they are reading the page as shown below

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue ScrollTo Example</title>
  </head>
  <style>
    #return-top {
    background-color: #000;
    border-radius: 50%;
    bottom: 50px;
    color: #fff;
    font-size: 14px;
    height: 50px;
    line-height: 50px;
    outline: 0;
    position: fixed;
    right: 50px;
    text-align: center;
    width: 50px;
}

#app {
  height:10000px;
  background: linear-gradient(#E4A972, #9941D8);
}

  </style>
  <body>
    <div id="app">
        <a href="#" id="return-top" v-scroll-to="'#top'">Top</a>
        <div id="top">Hi. I'm #top</div>
      </div>
      

    <!-- include Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- include VueScrollTo -->
    <script src="https://cdn.jsdelivr.net/npm/vue-scrollto"></script>
    <script>
      // initialize Vue app
      new Vue({
        el: '#app',
      });
    </script>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Vue ScrollTo Example</title>

</head>

<style>

#return-top {

background-color: #000;

border-radius: 50%;

bottom: 50px;

color: #fff;

font-size: 14px;

height: 50px;

line-height: 50px;

outline: 0;

position: fixed;

right: 50px;

text-align: center;

width: 50px;

}

#app {

height:10000px;

background: linear-gradient(#E4A972, #9941D8);

}

</style>

<body>

</div>

// initialize Vue app

new Vue({

el: '#app',

});

</script>

</body>

</html>

As you can see we have the button appearing on the bottom right corner of the screen when we click it will scroll to the top of the webpage and we also added some custom css as well