Vue JS Scroll to element in div using vue-scrollto

Vue JS Scroll to element in div using vue-scrollto


tutorials -

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

Trending On Tutorial Stuff

Our Sponsors

NodeJS Experts
React Experts
PHP Experts
AngularJS Experts
Aws Experts
Firebase Experts

Top Applications in Tutorial Stuff

Top Experts In Tutorial Stuff