Vue JS Scroll to Element in Div using Vue-scrollto Example

By Hardik Savani June 26, 2023 Category : Vue.JS

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...

Shares