Vue.js Scroll to element in div using vue-scrollto

Vue.js Scroll to element in div using vue-scrollto

In this article, 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.

In this article, 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/[email protected]/dist/vue.js"></script>

<script src="https://unpkg.com/[email protected]/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/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/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/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/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/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/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/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/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>

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

What are the differences between the various JavaScript frameworks? E.g. Vue.js, Angular.js, React.js

What are the differences? Do they each have specific use contexts?

Ember.js vs Vue.js - Which is JavaScript Framework Works Better for You

In this article we will discuss full details and comparison of both Ember.js and Vue.js