Simple responsive jQuery/Bootstrap "Back to Top" button
Posted: 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
Add this to hooks/tablename-dv.js
All credit goes here: http://www.2my4edge.com/2015/03/respons ... strap.html
Only differences to code in the post above is:
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>
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);
Only differences to code in the post above is:
- 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.