Vue JS Scroll to element in div using vue-scrollto
in nowadays, vue.js becomes more popular day by day. so today I want to share with you scroll to a specific reference id or element using vue-scrollto component in vue js. i will give you more example to scroll a specific element on vue js.
vue-scrollto is a vue js component. using vue-scrollto component you can easily make scroll to element in specific div in you webpage. you can also use as directive of vue js of vue-scrollto component.
now let's see bellow examples how it works.
Example 1:
<html>
<head>
<title>Vue JS Scroll to element - ItSoutionStuff.com</title>
<script src="https://unpkg.com/vue@2.5.2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-scrollto@2.7.9/vue-scrollto.js"></script>
<style>
h2, button {
margin-bottom: 1200px;
}
</style>
</head>
<body>
<div id="HDApp">
<button v-scroll-to="'#comments'">
Scroll to #comments
</button>
<h2 id="comments">Hi. welcome to ItSolutionStuff.com</h2>
</div>
<script>
new Vue({
el: '#HDApp',
methods: {
}
})
</script>
</body>
</html>
Example 2:
<html>
<head>
<title>Vue JS Scroll to element - ItSolutionStuff.com</title>
<script src="https://unpkg.com/vue@2.5.2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-scrollto@2.7.9/vue-scrollto.js"></script>
<style>
h2, button {
margin-bottom: 1200px;
}
</style>
</head>
<body>
<div id="HDApp">
<button v-scroll-to="{ el: '#comments' }">
Scroll to #comments (with el)
</button>
<button v-scroll-to="{ comments: '#comments' }">
Scroll to #comments (with comments)
</button>
<h2 id="comments">Hi. welcome to ItSolutionStuff.com</h2>
</div>
<script>
new Vue({
el: '#HDApp',
methods: {
}
})
</script>
</body>
</html>
Example 3:
<html>
<head>
<title>Vue JS Scroll to element - ItSolutionStuff.com</title>
<script src="https://unpkg.com/vue@2.5.2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-scrollto@2.7.9/vue-scrollto.js"></script>
<style>
h2, button {
margin-bottom: 1200px;
}
</style>
</head>
<body>
<div id="HDApp">
<button v-scroll-to="{ comments: '#comments', duration: 5000 }">
Scroll to #comments
</button>
<h2 id="comments">Hi. welcome to ItSolutionStuff.com</h2>
</div>
<script>
new Vue({
el: '#HDApp',
methods: {
}
})
</script>
</body>
</html>
Example 4:
<html>
<head>
<title>Vue JS Scroll to element - ItSolutionStuff.com</title>
<script src="https://unpkg.com/vue@2.5.2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-scrollto@2.7.9/vue-scrollto.js"></script>
<style>
h2, button {
margin-bottom: 1200px;
}
</style>
</head>
<body>
<div id="HDApp">
<button v-scroll-to="{ comments: '#comments', easing: 'linear' }">
Scroll to #comments
</button>
<h2 id="comments">Hi. welcome to ItSolutionStuff.com</h2>
</div>
<script>
new Vue({
el: '#HDApp',
methods: {
}
})
</script>
</body>
</html>
Example 5:
<html>
<head>
<title>Vue JS Scroll to element - ItSolutionStuff.com</title>
<script src="https://unpkg.com/vue@2.5.2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-scrollto@2.7.9/vue-scrollto.js"></script>
<style>
h2, button {
margin-bottom: 1200px;
}
</style>
</head>
<body>
<div id="HDApp">
<button v-scroll-to="{
el: '#comments',
easing: [.6, .80, .30, 1.9],
duration: 2000
}">
Scroll to #comments
</button>
<h2 id="comments">Hi. welcome to ItSolutionStuff.com</h2>
</div>
<script>
new Vue({
el: '#HDApp',
methods: {
}
})
</script>
</body>
</html>
I hope it can help you...

Hardik Savani
I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter and Bootstrap from the early stage. I believe in Hardworking and Consistency.
We are Recommending you
- PHP - Infinite Scroll Pagination using JQuery Ajax Example
- PHP Codeigniter - Ajax Infinite Scroll Pagination Example
- AngularJS - scroll to a specific element using anchorscroll
- Laravel Infinite Scroll Pagination using Ajax Example
- Laravel 5 and Vue JS CRUD with Pagination example and demo from scratch
- How to Create Scroll to Top of the Page by JQuery Animate?
- How to Scrolling Table with Fixed Header in HTML?
- Automatically Scroll to Bottom of Div JQuery Example