diff --git a/resources/assets/javascripts/lib/scroll_to_top.js b/resources/assets/javascripts/lib/scroll_to_top.js index 2a754027a24579638c784e3a633c3a6897d020bd..9b0d3ee38d5ecbe88b9619cb1282894abeabf94d 100644 --- a/resources/assets/javascripts/lib/scroll_to_top.js +++ b/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'}); } }; diff --git a/templates/layouts/base.php b/templates/layouts/base.php index 180e0207d09072245499fe36a10f5d1d8339b35e..2db1f7eab8b4813799ade93694197e9346c1e225 100644 --- a/templates/layouts/base.php +++ b/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>