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

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.

Read Also:  jQuery black gradient background effect Hover Slider With CSS

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 :

Read Also:  PHP Facebook Graph API GET comments hide-delete comments

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.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  jQuery Modal Popup Window Dialog Box
  2. Read Also:  NodeJS Login and Registration Authentication using mysql
  3. Read Also:  PHP Laravel CURL HTTP GET POST Request
  4. Read Also:  Reset input fields using onchange event in JQuery
  5. Read Also:  JavaScript Public Class Fields
  6. Read Also:  Laravel 6 Eloquent Global Scope Tutorial Example
  7. Read Also:  PHP MySQL Delete record with confirmation popup using jquery ajax
  8. Read Also:  Jquery Datatable listing json Server side in Php Mysql and Ajax
  9. Read Also:  vuejs Smooth Scroll to Top
  10. Read Also:  Laravel 6 Eloquent Global Scope Tutorial Example

Leave a Comment

Your email address will not be published. Required fields are marked *