vuejs Smooth Scroll to Top

Today, We want to share with you vuejs Smooth Scroll to Top.In this post we will show you vue smooth scroll to element, hear for Vue.js Smooth Scroll To Component we will give you demo and example for implement.In this post, we will learn about Vue.js scroll to top of page for same route with an example.

vuejs Smooth Scroll to Top

There are the Following The simple About vuejs Smooth Scroll to Top Full Information With Example and source code.

As I will cover this Post with live Working example to develop vue-scrollto programmatically, so the vuejs scroll to anchor for this example is following below.

Read Also:  vuejs Scroll smoothly to specific element on page

Back to top component with Vuejs

HTML Part

<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>

vuejs Part

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'
});

CSS Part

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;
}

Sticky, Smooth, Active Nav using vuejs
Web Programming Tutorials Example with Demo

Read :

Read Also:  Laravel Increase Website Speed performance optimization

Summary

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

I hope you get an idea about vuejs Smooth Scroll to Top.
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:  Laravel 6 CRUD Tutorial With Example from scratch
  2. Read Also:  Implement Smooth Scrolling using vuejs Example
  3. Read Also:  Vue.js Back to Top Component (vue smooth scroll)
  4. Read Also:  vue-scrollto smooth scroll vuejs example
  5. Read Also:  PHP MySQL Infinite Scroll Pagination
  6. Read Also:  How to delete session Data in Laravel blade file?
  7. Read Also:  Vue.js Multi Step Form with Progress Bar
  8. Read Also:  Radio button Component in VueJS
  9. Read Also:  Smooth Scrolling Effect in JavaScript Using Vuejs
  10. Read Also:  JavaScript Remove Object from Array
CLOSEX