Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

JavaScript/DOM/Element/scrollIntoView

Aus SELFHTML-Wiki
< JavaScript‎ | DOM‎ | Element
Wechseln zu: Navigation, Suche

Die Methode scrollIntoView() positioniert den Inhalt im Anzeigefenster des Browsers so, dass der Viewport nicht den Seitenanfang sondern ein bestimmtes Element anzeigt. Dies stellt eine Alternative zu seiteninternen Verweisen mit Sprungmarken dar.

  • JavaScript 1.2
  • Android
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Syntax

element.scrollIntoView(alignToTop);

  • alignToTop: Boolescher Wert
    • true wenn der Inhalt so positioniert werden soll, dass das Element oben im Anzeigefenster erscheint
      (ein Aufruf ohne Parameter entspricht true)
    • false: wenn das Element unten im Anzeigefenster platziert sein soll.

Anwendungsbeispiel[Bearbeiten]

Beispiel ansehen …
  function init() {
    var button = document.getElementById('button');
    button.addEventListener('click',roll);
    button.scrollIntoView();
  }
  
  function roll() {
    var elem = document.getElementById('kapitel3');
    elem.scrollIntoView();
  }
Das Beispiel enthält mehrere Kapitel, die in section-Elementen ausgezeichnet sind. Beim Laden der Seite erhält der Button im Kapitel 4 seine Klickfunktionalität. Die Seite wird dank button.scrollIntoView(); so dargestellt, dass sich der Button am oberen Ende des Viewports befindet.
Bei einem Klick auf den Button wird die Funktion roll aufgerufen. Sie identifiziert das Element mit der id kapitel3 und mit elem.scrollIntoView(); wird zu diesem Kapitel gesprungen.

In einem erweiterten Beispiel könnte es bei jedem Kapitel einen vor und zurück-Button, sowie eine Lesemarke, die sich den letzten Stand merkt, geben.

Weblinks[Bearbeiten]