Koha-community/Koha
13
7
Fork 0
Code Issues Releases Wiki Activity

Bug 30136: Add back to top button to OPAC

Browse source 
Like in many websites, when scrolling down the page make a button appear to go back to top.
This can be very useful specially in search results page.

This patch adds to OPAC using Javascript a button with id "backtotop".
Button appears when 300 pixels from top are hidden.
This value may be adapted.

Test plan
1) Go to OPAC
2) Perform a search with many results
3) Scroll down
=> Back to top button appears
4) Manually scroll back to top
=> Button disappears
5) Scroll down and click on Back to top button
=> You get to top

Signed-off-by: Barbara Johnson <barbara.johnson@bedfordtx.gov>

Signed-off-by: Séverine QUEUNE <severine.queune@bulac.fr>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
This commit is contained in:
Fridolin Somers 2022-02-18 10:44:14 -10:00
parent af206b78bc
commit 09d3b36c08
1 changed files with 14 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc
View file

@ -213,6 +213,20 @@
return confirmDelete(MSG_DELETE_SEARCH_HISTORY);
});
$("body").append('<button id="backtotop" class="btn btn-primary"><i class="fa fa-arrow-up" aria-hidden="true"></i></button>');
$("#backtotop").hide();
$(window).scroll(function(){
if ( $(window).scrollTop() < 300 ) {
$("#backtotop").fadeOut();
} else {
$("#backtotop").fadeIn();
}
});
$("#backtotop").click(function(e) {
e.preventDefault();
$("html,body").animate({scrollTop: 0}, "slow");
});
</script>
[% IF Koha.Preference( 'opacbookbag' ) == 1 %]