Page 1 of 1

Simple responsive jQuery/Bootstrap "Back to Top" button

Posted: 2016-09-01 00:15
by peebee
For long pages, a "back to top" button can be handy to save the scroll back up. This responsive back to top button will appear on all pages only when scroll from top is required. Nice smooth scroll effect and styled with Bootstrap.

Add this to hooks/footer-extras.php

Code: Select all

<style type="text/css">
.back-to-top {
cursor: pointer;
position: fixed;
bottom: 0;
right: 20px;
display:none;
}
.back-to-top:hover {
cursor: pointer;
position: fixed;
bottom: 0;
right: 20px;
display:inline !important;
}
</style>
<a id="back-to-top" href="#" class="btn btn-primary btn-lg back-to-top" role="button" title="Back to Top" data-toggle="tooltip" data-placement="top">
 	<span class="glyphicon glyphicon-chevron-up"></span>
</a>
Add this to hooks/tablename-dv.js

Code: Select all

(function($) {    
	$(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 () {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
});
})(jQuery);
All credit goes here: http://www.2my4edge.com/2015/03/respons ... strap.html

Only differences to code in the post above is:
  1. the jQuery is wrapped in (function($){ ....})(jQuery); to fix a $ conflict with Prototype which loads by default with AppGini.
  • the tooltip function is removed (not necessary anyway) from the jQuery as it too conflicted with Prototype/bootstrap
  • .back-to-top:hover CSS added as the button kept disappearing on hover after first click (for reasons I can't explain)? CSS seems to fix it.
For what it's worth......

Re: Simple responsive jQuery/Bootstrap "Back to Top" button

Posted: 2016-09-01 14:39
by grimblefritz
Pretty slick. I've wished a gazillion times for just such a thing. Thanks!

Re: Simple responsive jQuery/Bootstrap "Back to Top" button

Posted: 2017-01-11 06:50
by FTH Abrar
A bit confusing.. couldnt find the file in representing ==> "Add this to hooks/tablename-dv.js" or even if using my own tablename :?:

Re: Simple responsive jQuery/Bootstrap "Back to Top" button

Posted: 2017-01-18 20:11
by grimblefritz
If the file is not already there, you will need to create it.

Re: Simple responsive jQuery/Bootstrap "Back to Top" button

Posted: 2017-02-06 21:37
by tylerVirginia
I copy and pasted all of that coding as described but I do not have the back to top button showing. Is there something I am missing?