Simple responsive jQuery/Bootstrap "Back to Top" button

Got something cool to share with AppGini users? Feel free to post it here!
Post Reply
peebee
AppGini Super Hero
AppGini Super Hero
Posts: 352
Joined: 2013-03-21 04:37

Simple responsive jQuery/Bootstrap "Back to Top" button

Post by peebee » 2016-09-01 00:15

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

grimblefritz
AppGini Super Hero
AppGini Super Hero
Posts: 336
Joined: 2015-12-23 16:52

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

Post by grimblefritz » 2016-09-01 14:39

Pretty slick. I've wished a gazillion times for just such a thing. Thanks!

FTH Abrar
Posts: 4
Joined: 2017-01-11 05:28

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

Post by FTH Abrar » 2017-01-11 06:50

A bit confusing.. couldnt find the file in representing ==> "Add this to hooks/tablename-dv.js" or even if using my own tablename :?:

grimblefritz
AppGini Super Hero
AppGini Super Hero
Posts: 336
Joined: 2015-12-23 16:52

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

Post by grimblefritz » 2017-01-18 20:11

If the file is not already there, you will need to create it.

tylerVirginia
Posts: 2
Joined: 2017-02-03 16:33

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

Post by tylerVirginia » 2017-02-06 21:37

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?

Post Reply