You can create a smooth go top button with bootstrap, css and jquery.
Here is the code.
Css code:
1 2 3 4 5 6 7 | .back-to-top { cursor: pointer; position: fixed; bottom: 20px; right: 20px; display:none; } |
Html code
2 | <a id="back-to-top" href="#" class="btn btn-default btn-md back-to-top" role="button" title="Top" data-toggle="tooltip" data-placement="left"><i class="fa fa-arrow-up" aria-hidden="true"></i></a> |
jQuery code
3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <script> // JavaScript Document // JavaScript Document $(document).ready(function(){ $(window).scroll(function () { if ($(this).scrollTop() > 50) { $('#back-to-top').fadeIn(); } else { $('#back-to-top').fadeOut(); } }); // scroll body to 0px on click $('#back-to-top').click(function () { $('#back-to-top').tooltip('hide'); $('body,html').animate({ scrollTop: 0 }, 800); return false; }); $('#back-to-top').tooltip('show'); }); </script> |
Be sure to have included cdn for bootstrap js, bootstrap css, jquery js and font awesome.
You can tweak the button further from css, put it in a different position if you like that.