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 target
element 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