<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 ----------> <button onclick="topFunction()" id="myBtn" title="Scroll to top">^</button>

#myBtn { position: fixed; bottom: 20px; right: 30px; z-index: 99; border: none; background-color: blue; color: white; cursor: pointer; width:40px; height:40px; border-radius: 7px; font-size: 17px; } #myBtn:hover { background-color: green; }

let mybutton = document.getElementById("myBtn"); // When the user scrolls down 30px from the top of the document, show the button window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 30 || document.documentElement.scrollTop > 30) { mybutton.style.display = "block"; } else { mybutton.style.display = "none"; } } function topFunction() { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; }