Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • PDF Invoice Generator
Menu

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

Posted on March 26, 2023

 

 

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

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!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>

 

 

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

 

 

1
2
3
4
5
6
<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>

 

 

 

 

 

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

 

 

1
2
3
4
5
6
<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>

 

 

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

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!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>

 

 

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

 

Recent Posts

  • Node.js Express Project to Remove Background of Images Using Rembg & Formidable Library in Browser
  • Node.js Tutorial to Remove Background From Image Using Rembg & Sharp Library in Command Line
  • Python 3 Flask Project to Remove Background of Multiple Images Using Rembg Library in Browser
  • Python 3 Rembg Library Script to Bulk Process Multiple Images and Remove Background in Command Line
  • Python 3 Rembg Library Script to Remove Background From Image in Command Line
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme