Resolve "Barrierefreiheit: "Back to top" ist nicht per Tabulator erreichbar"

Closes #3941

Merge request studip/studip!2800

resources/assets/javascripts/lib/scroll_to_top.js

@@ -4,9 +4,9 @@ let fold;
 let was_below_the_fold = false;
 
 const back_to_top = function(scrolltop) {
-    var is_below_the_fold = scrolltop > fold;
+    let is_below_the_fold = scrolltop > fold;
     if (is_below_the_fold !== was_below_the_fold) {
-        $('#scroll-to-top').toggleClass('hide', !is_below_the_fold);
+        document.getElementById('scroll-to-top').classList.toggle('hide', !is_below_the_fold);
         was_below_the_fold = is_below_the_fold;
     }
 };
@@ -23,15 +23,21 @@ const ScrollToTop = {
     },
     disable() {
         Scroll.removeHandler('header');
-        $('#scroll-to-top').addClass('hide');
+        document.getElementById('scroll-to-top').classList.add('hide');
     },
     moveBack() {
-        $('#scroll-to-top').on('click', function(e) {
-            $('html, body').stop().animate({
-                scrollTop: (0)
-            }, 1000, 'easeInOutExpo');
-            e.preventDefault();
+        document.getElementById('scroll-to-top').addEventListener('click', (evt)  => {
+            evt.preventDefault();
+            this.toTop();
         });
+        document.getElementById('scroll-to-top').addEventListener('keypress', (evt) => {
+            if (evt.code === 'Space') {
+                this.toTop();
+            }
+        });
+    },
+    toTop() {
+        window.scroll({top: 0, left: 0, behavior: 'smooth'});
     }
 };
 

templates/layouts/base.php

@@ -96,7 +96,7 @@ $lang_attr = str_replace('_', '-', $_SESSION['_language']);
     </main>
     <!-- End main content -->
 
-    <a id="scroll-to-top" class="hide">
+    <a id="scroll-to-top" class="hide" tabindex="0" title="<?= _('Zurück zum Seitenanfang') ?>">
         <?= Icon::create('arr_1up', 'info_alt')->asImg(24, ['class' => '']) ?>
     </a>