From 77efc61268fe8a26564fa75b61e9594dea18d9bc Mon Sep 17 00:00:00 2001
From: Fridolin Somers <fridolin.somers@biblibre.com>
Date: Fri, 18 Feb 2022 10:44:14 -1000
Subject: [PATCH] Bug 30136: Add back to top button to OPAC

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
---
 .../bootstrap/en/includes/opac-bottom.inc          | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc
index 5398bf3fcb..8e0762e9eb 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc
@@ -217,6 +217,20 @@ $.widget.bridge('uitooltip', $.ui.tooltip);
         return confirmDelete(MSG_DELETE_SEARCH_HISTORY);
     });
 
+    $("body").append('<button id="backtotop" class="btn btn-primary"><i class="fa fa-arrow-up"></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 %]
-- 
2.35.1