JavaScript/DOM/Element/scrollIntoView

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.

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

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

• CSSOM: scrollIntoView
• MDN: element.scrollIntoView