In these days, vue.js turns out to be more well known step by step. so today I need to impart to you look to a particular reference id or component utilizing vue-scrollto part in vue js. I will give you more guide to look over a particular component on vue js.
vue-scrollto is a vue js part. utilizing vue-scrollto part you can without much of a stretch make look to component in unambiguous div in you website page. you can likewise use as mandate of vue js of vue-scrollto part.
presently we should see roar models how it functions.
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>
