HTMLElement.offsetTop — Eigenschaft · JavaScript-Referenz

Signatur

HTMLElement.offsetTop

Beschreibung

Die schreibgeschützte Eigenschaft offsetTop gibt an, wie weit die obere Rahmenkante (Border-Box) eines Elements von der oberen Padding-Kante seines offsetParent entfernt ist. Der offsetParent ist das nächste positionierte Vorfahrenelement (position ungleich static), eine Tabellenzelle (td, th, table) oder – wenn keines existiert – das body-Element.

Typische Einsatzzwecke sind das Berechnen von Scroll-Zielen (z. B. „zu Abschnitt springen“), das Positionieren von Tooltips relativ zu einem Container, sticky Navigationen oder einfache „Ist-Element-schon-erreicht?“-Prüfungen beim Scrollen. Der Wert wird auf eine ganze Zahl gerundet und berücksichtigt keine CSS-Transformationen (transform) und keinen Scroll-Offset des Elternelements.

Wichtig: offsetTop ist immer relativ zum offsetParent, nicht zum Dokument. Für die absolute Position im Dokument muss man entweder die offsetTop-Werte entlang der offsetParent-Kette aufsummieren oder – meist einfacher und genauer – getBoundingClientRect().top + window.scrollY verwenden.

Das Auslesen erzwingt eine synchrone Layout-Berechnung (Reflow). In Schleifen oder Scroll-Handlern sollte man Werte deshalb zwischenspeichern und Lese-/Schreibzugriffe auf das DOM nicht abwechselnd ausführen.

Rückgabewert

Typ

number

Beschreibung

Ganzzahliger Abstand in CSS-Pixeln zum oberen Innenrand des offsetParent. 0, wenn das Element (oder ein Vorfahr) display: none hat oder nicht im Dokument eingehängt ist.

Beispiele

Abstand zum positionierten Container auslesen

// HTML: <div id="box" style="position:relative; padding:20px">
//         <p id="text" style="margin-top:30px">Hallo</p>
//       </div>
const text = document.getElementById('text');
console.log(text.offsetParent.id); // Bezugselement
console.log(text.offsetTop);       // Padding + Margin

box 50

Absolute Position im Dokument über die offsetParent-Kette

const getDocumentTop = (el) => {
  let top = 0;
  while (el) {
    top += el.offsetTop;
    el = el.offsetParent;
  }
  return top;
};

const section = document.querySelector('#kontakt');
console.log(`Abschnitt beginnt bei ${getDocumentTop(section)}px`);

Abschnitt beginnt bei 1840px

Sticky-Navigation beim Scrollen aktivieren

const nav = document.querySelector('nav');
// Wert einmalig zwischenspeichern – vermeidet Reflow bei jedem Scroll-Event
const navTop = nav.offsetTop;

window.addEventListener('scroll', () => {
  nav.classList.toggle('fixiert', window.scrollY >= navTop);
}, { passive: true });

Sanft zu einem Element innerhalb eines scrollbaren Containers scrollen

// Container muss position: relative haben, damit er offsetParent ist
const liste = document.querySelector('.liste');
const ziel = liste.querySelector('[data-id="42"]');

liste.scrollTo({ top: ziel.offsetTop, behavior: 'smooth' });

// Wichtig · Fallstricke

Relativ zum offsetParent: Ist der gewünschte Container nicht positioniert, bezieht sich der Wert auf einen weiter außen liegenden Vorfahren oder das body-Element – häufige Fehlerquelle. Abhilfe: position: relative am Container setzen.
Rundung: Der Wert ist ganzzahlig. Für subpixelgenaue Werte getBoundingClientRect() verwenden.
Transformationen und Scrollen: transform (z. B. translateY) und der scrollTop des Elternelements fließen nicht ein.
Versteckte Elemente: Bei display: none ist offsetParent null und offsetTop 0. Bei position: fixed ist offsetParent ebenfalls null, offsetTop bezieht sich dann auf den Viewport.
Inline-Elemente über mehrere Zeilen: Der Wert bezieht sich auf die erste Zeilenbox.
Performance: Jeder Lesezugriff kann einen Reflow erzwingen („Layout Thrashing“). Für Sichtbarkeitsprüfungen ist IntersectionObserver meist die bessere Wahl.
Kompatibilität: In allen Browsern verfügbar; die Eigenschaft ist nur auf HTMLElement definiert, nicht auf SVG-Elementen.

Siehe auch

HTMLElement.offsetLeft HTMLElement.offsetParent HTMLElement.offsetHeight Element.getBoundingClientRect() Element.scrollTop IntersectionObserver HTMLModElement.dateTime