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

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)

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.

Also Read :  Vuejs set focus Textbox Components

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

<div id="app">

  <!--   the backtotop component -->
  <backtotop></backtotop>
  <div class="wrapper">
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Back To Top</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
        <!--/.nav-collapse -->
      </div>
    </nav>

    <div  class="container-fluid box">

    </div>
    <!-- /.container -->
    <div  class="container-fluid box">

    </div>
  </div>
</div>

<script type="text/x-template" id="backtotop">
  <button class="goTop" v-if="isVisible" @click="backToTop">
        <i class="fa fa-angle-up" aria-hidden="true"></i>
    </button>
</script>

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 :

Also Read :  PHP CodeIgniter 3 Generate Random record from mysql

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.

Leave a Reply

avatar
  Subscribe  
Notify of