Pages

▼

16 January, 2023

Vue JS Scroll to component in div utilizing vue-scrollto

 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:

Read Also: How to create custom scrollbar using jquery mcustomscrollbar plugin ?
<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>
at

No comments:

Post a Comment

Thanks