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:

Read Also: Vue JS Get Checked Radio Button Value on Onchange Event
<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...

Tags :

We are Recommending you

Popular Posts

Categories

Latest Posts