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