Vue JS Scroll to element in div using vue-scrollto
In this post we will give you information about Vue JS Scroll to element in div using vue-scrollto. Hear we will give you detail about Vue JS Scroll to element in div using vue-scrolltoAnd how to use it also give you demo for it if it is necessary.
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…
Hope this code and post will helped you for implement Vue JS Scroll to element in div using vue-scrollto. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs