<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="container"> <div class="row"> <h2>Scroll to top button bootstrap 4</h2> </div> <div class="container" style="height:300px; border:2px solid #007BFF; margin-bottom:500px;"> <div class="row"> <br> <h2 class="container text-center" >Link to top page on scrolling down</h2> <a id="scroll-to-top" href="#" class="btn btn-primary btn-lg back-to-top" role="button" title="Click to return on the top page" data-toggle="tooltip" data-placement="left"><span class="fa fa-angle-double-up"></span></a> </div> </div> </div>

.back-to-top { cursor: pointer; position: fixed; bottom: 20px; right: 20px; display:none; }

$(document).ready(function(){ $(window).scroll(function () { if ($(this).scrollTop() > 50) { $('#scroll-to-top').fadeIn(); } else { $('#scroll-to-top').fadeOut(); } }); // scroll body to 0px on click $('#scroll-to-top').click(function () { $('#scroll-to-top').tooltip('hide'); $('body,html').animate({ scrollTop: 0 }, 800); return false; }); $('#scroll-to-top').tooltip('show'); });