In Anwendungen mit großen Seitenlängen, ist es oft nützlich eine Funktion anzubieten die dem Benutzer erlaubt mit einem Klick an den Seitenanfang zu scrollen. Zur Erstellung eines solchen Scrollverhaltens steht ein jQuery-Plugin: toTop() zur Verfügung. Die Einbindung ist wie folgt:

$(document).ready(function() {
  $('body').toTop()
})

Das jQuery-Plugin: toTop() verfügt zu dem über Optionen mit denen das verhalten und aussehen angepasst werden kann.

$(document).ready(function() {
  $('body').totop({
    option:{
      buttonText: { de:'Nach Oben', en:'To Top' },
      language: 'auto',
      smallButton: false,
      scrollOffset: 50,
      scrollTimeMax: 800,
      scrollTimeMin: 250,
      pixelPerSecond: 4000,
      mobileBreakpoint: 639,
      dynamicVisibility: true,
      dynamicVisibilityTime: 2000,
      theme: '',
      containerType: 'container-fixed'
    }
  })
})
Optionen
1 buttonText Object { de:'Nach Oben', en:'To Top' } Buttontext in den benötigten Sprachen
2 language* String Der Buttontext wird aus dem Doc-Header gelesen kann aber selber definiert werden!
3 smallButton Bool false Desktop Buttontyp Icon Only oder Icon & Text Button
4 scrollOffset Number 50 Offset in Px ab wann der Button angezeigt wird
5 scrollTimeMax Number 800 Maximale Zeit die das scrollen benötigt
6 scrollTimeMin Number 250 Minimale Zeit die das scrollen benötigt
7 pixelPerSecond Number 4000 Pixel die pro Sekunde gescrollt werden
8 mobileBreakpoint Number 639 Breakpoint in Px an dem der Icon Only Button angezeigt wird
8 dynamicVisibility Bool true Interaktions basiertes Einblenden und Ausblenden. Nicht auf Mobile!
9 dynamicVisibilityTime Number 2000 Delay in Millisekunden für interaktions basiertes Ausblenden
10 theme String Umschließende Css Klasse für optionales Styling Theme z.B. dark
11 containerType String container-fixed container-fixed, container-liquid - Die Position des Button kann je nach GridTyp angepasst werden