Back-To-Top

Der Back-To-Top Button ist eine Komponente, die es dem Benutzer ermöglicht schnell an den Anfang der Seite zu gelangen. Der Button wird automatisch unten rechts angezeigt, sobald der Benutzer eine bestimmte Scrollposition erreicht hat. Diese Komponente ist vor allem auf mobilen Endgeräten sehr hilfreich.

1
2  // Back-To-Top
3  // Javascript: jQuery
4  
5  var back_to_top_button = ['<a href="#top" class="back-to-top"></a>'].join('');
6  $('body').append(back_to_top_button);
7
8  $(function () {
9    $(window).scroll(function () {
10      if ($(this).scrollTop() > 100) {
11        $('.back-to-top').css({
12          opacity: 0.4,
13        });
14      } else {
15        $('.back-to-top').css({
16          opacity: 0,
17        });
18      }
19    });
20
21    $('.back-to-top').click(function () {
22      $('body,html').animate(
23        {
24          scrollTop: 0,
25        },
26        500
27      );
28      return false;
29    });
30  });
31
32