woman and man sitting in front of monitor

Website ganz oben laden / anzeigen und nicht in der Mitte

Webdesign

Um die JavaScript-Funktion, die beim Laden der Seite zum obersten Bereich scrollt, in deine Webseite einzubetten, kannst du die folgenden Schritte befolgen. Diese Anleitung geht davon aus, dass du Grundkenntnisse im Umgang mit HTML und JavaScript hast.

Schritt-für-Schritt Anleitung

1. Direkte Einbettung im HTML-Dokument

Öffne das HTML-Dokument (index.html), in dem du die Funktion einbetten möchtest, und füge den JavaScript-Code innerhalb des <head>-Tags oder vor dem schließenden </body>-Tag ein. Die Platzierung vor dem schließenden </body>-Tag wird oft bevorzugt, da dies sicherstellt, dass die Seite geladen ist, bevor das Skript ausgeführt wird.

 
<!DOCTYPE html>
<html lang="de">

<head>
<meta charset="UTF-8">
<title>Deine Webseite</title>
<!-- Weitere Einbindungen wie CSS-Dateien -->
</head>
<body>
<!-- Dein Webseiteninhalt -->

<!-- Skript am Ende des Body einfügen -->

<script>
window.onload = function() {
window.scrollTo(0,0);
};
</script>
</body>
</html>

 

 

2. Einbettung als externe JavaScript-Datei

Falls du den JavaScript-Code auslagern möchtest, um deine HTML-Datei sauber zu halten oder den Code auf mehreren Seiten wiederverwenden möchtest, kannst du folgendermaßen vorgehen:

a. Erstelle eine neue JavaScript-Datei, zum Beispiel scrollToTop.js, in deinem Projektverzeichnis.

b. Füge den JavaScript-Code in scrollToTop.js ein:

 
window.onload = function() {
window.scrollTo(0,0);
};

c. Verlinke die JavaScript-Datei in deinem HTML-Dokument vor dem schließenden </body>-Tag:

 
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Deine Webseite</title>
<!-- Weitere Einbindungen wie CSS-Dateien -->
</head>

<body>
<!-- Dein Webseiteninhalt -->

<!-- Externes Skript am Ende des Body einfügen -->

<script src="scrollToTop.js"></script>
</body>
</html>

 

 

Hinweise

  • window.onload vs. DOMContentLoaded: window.onload wartet, bis die gesamte Seite, inklusive aller abhängigen Ressourcen wie Bilder, Stylesheets usw., geladen ist. Für Operationen, die nicht auf diese Ressourcen angewiesen sind, kann alternativ das DOMContentLoaded-Event verwendet werden, welches ausgelöst wird, sobald das HTML-Dokument vollständig geladen und geparst ist, ohne auf Stylesheets, Bilder und Frames zu warten.

  • Testen: Nachdem du den Code eingebettet hast, teste die Webseite in verschiedenen Browsern, um sicherzustellen, dass das Scroll-Verhalten wie erwartet funktioniert.

Durch das Einbetten dieser Funktion in deine Webseite sollte sichergestellt sein, dass beim Aufruf der Seite automatisch zum Anfang gescrollt wird, sodass der Header sofort sichtbar ist.