<!--
//
//
// ToTop
-->

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:

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

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

```js
$(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'
    }
  })
})
```

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