Morioh
Login
Donna Corriveau

Donna Corriveau

5 years ago

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.

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>

#vue-js #javascript

Vue.js Scroll to element in div using vue-scrollto
3 Likes105.45 GEEK