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.

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.

Snippet Contents

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.

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 :

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.   Vue.js Back to Top Component (vue smooth scroll)
  2.   Smooth Scrolling Effect in JavaScript Using Vuejs
  3.   Jquery Count Child Elements with class
  4.   CodeIgniter Stripe Payment Gateway Api Integration
  5.   vue-scrollto smooth scroll vuejs example
  6.   vuejs Scroll smoothly to specific element on page
  7.   Add and Delete rows Dynamically using jQuery
  8.   Filters Example (Number, Currency) using Angular
  9.   PHP Image Resize, Crop, Thumbnail, Watermark
  10.   Laravel 5.6 Share Variable With Display Data in View

Leave a Reply

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