Today, We want to share with you Vue.js Back to Top Component (vue smooth scroll).In this post we will show you Create a Scroll Back to Top Button with CSS & VueJs, hear for Dynamic scroll back to top of the page button vuejs we will give you demo and example for implement.In this post, we will learn about How to: Back-to-top button without scroll events using Vue with an example.

Vue.js Back to Top Component (vue smooth scroll)

Contents

There are the Following The simple About Vue.js Back to Top Component (vue smooth scroll) Full Information With Example and source code.

As I will cover this Post with live Working example to develop vue js scroll to top on route change, so the vuejs scroll to top animation for this example is following below.

Back to top component with Vuejs

external CDN Required.

https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

Step 1: HTML Part

index.html



  
  
  
    
      
        
          
          Back To Top
        
        
          
            Home
            About
            Contact

Step 2: Vuejs Part

main.js

Vue.component('backtotop', {
  template: '#backtotop',
  data: function() {
    return {
      isVisible: false
    };
  },
  methods: {
    initToTopButton: function() {
      $(document).bind('scroll', function() {
        var backToTopButton = $('.goTop');
        if ($(document).scrollTop() > 250) {
          backToTopButton.addClass('isVisible');
          this.isVisible = true;
        } else {
          backToTopButton.removeClass('isVisible');
          this.isVisible = false;
        }
      }.bind(this));
    },
    backToTop: function() {
      $('html,body').stop().animate({
        scrollTop: 0
      }, 'slow', 'swing');
    }
  },
  mounted: function() {
    this.$nextTick(function() {
      this.initToTopButton();
    });
  }
});

var app = new Vue({
  el: '#app'
});

Step 3: Custom CSS

style.css

body {
  margin-top: 5px;
}

.navbar {
  margin-bottom: 0;
}

.box {
  height: 700px;
  &:first-of-type{
    background-color: red;
  }
  &:last-of-type{
    background-color: green;
  }
}

.goTop {
  border-radius: 5px;
  background-color: rgb(1,14,27);
  background-color: rgba(1, 14, 27, .7);
  position: fixed;
  width: 45px;
  height: 45px;
  display: block;
  right: 15px;
  bottom: 15px;
  border: none;
  opacity: 0;
  z-index: -1;
  .fa {
    color: white;
    font-size: 22px;
  }
  &:hover {
    opacity: 1;
    background-color: rgb(1,14,27);
    background-color: rgba(1, 14, 27, .9);
  }
}

.isVisible {
  opacity: .8;
  z-index: 4;
  transition: all .4s ease-in;
}

Web Programming Tutorials Example with Demo

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Vue js Back-to-Top Component (vue smooth scroll).
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Vue.js Back to Top Component (vue smooth scroll)