JavaScript Scroll to Top of Div
-
Verwenden Sie die
scrollIntoView()-Methode, um in JavaScript zum Anfang des Div zu scrollen -
Verwenden Sie die
scrollTo()-Methode, um in JavaScript zum Anfang von Div zu scrollen
In JavaScript können wir für die interne Verlinkung und das Scrollen durch die Webseite mehrere Möglichkeiten haben, zu folgen. Wir können sogar das href des anchor-Tags direkt auf eine id setzen und zu diesem Abschnitt hochscrollen.
Aber für ein dynamisches Laufwerk wechseln wir zur Ausführung der Aufgabe auf die JavaScript-Methode.
Im folgenden Abschnitt demonstrieren wir die Methoden scrollIntoView() und scrollTo(). Beide Methoden haben eine ähnliche Funktionalität, aber scrollIntoView() kann ohne Parameter arbeiten, und scrollTo() benötigt möglicherweise einige angegebene Punkte.
Sehen wir uns das Beispiel an.
Verwenden Sie die scrollIntoView()-Methode, um in JavaScript zum Anfang des Div zu scrollen
Technisch erfordert die Methode nichts anderes als die Deklaration der Methode. Wir werden zuerst eine Instanz für das oberste div-Element initiieren und dann die scrollIntoView()-Unterstützung verwenden.
Folglich wird ein Verknüpfungsereignis den Blick speziell auf diesen oberen Teil lenken. Die folgenden Codezeilen erklären im Detail.
Code-Auszug:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
#top{
height:200px;
background:pink;
}
#buff{
height:800px;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="buff"></div>
<a href="javascript: scroll()">Jump to top of page</a>
<script>
function scroll(){
var top = document.getElementById("top").scrollIntoView({behavior: 'smooth'}, true);
}
</script>
</body>
</html>
Ausgang:
-Method-to-Scroll-to-Top.webp)
Verwenden Sie die scrollTo()-Methode, um in JavaScript zum Anfang von Div zu scrollen
Die scrollTo()-Methode benötigt Parameter, um die Viewport-Messungen zurückzusetzen. Normalerweise hat der aktuelle Zustand des Ansichtsfensters seine Position auf der x-Achse und der y-Achse.
Um später das obere Segment zu erreichen, setzen wir die aktuellen Positionen zurück und befinden uns somit an der Spitze des div.
Code-Auszug:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
#top{
height:200px;
background:orange;
}
#buff{
height:800px;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="buff"></div>
<a href="javascript: scroll()">Jump to top of page</a>
<script>
function scroll(){
var top = document.getElementById("top")
window.scrollTo(0,0);
}
</script>
</body>
</html>
Ausgang:
-Method-to-Scroll-to-Top.webp)
