Scrollen Sie in JavaScript zu ID
-
Verwenden Sie die
scrollIntoView()-Methode, um in JavaScript zur ID zu scrollen -
Verwenden Sie die
scrollTo()-Methode mit manueller Ansichtsberechnung, um in JavaScript zur ID zu scrollen -
Verwenden Sie die
scrollTo()-Methode mitscrollLeftundscrollTop, um in JavaScript zur ID zu scrollen
Im Allgemeinen können wir, wenn wir ein Anker-Tag in unserem HTML-Body setzen und das href auf eine bestimmte ID setzen, zu diesem Element scrollen. Aber diese Praxis wird nicht meistens für dynamische Fälle begrüßt.
Wenn Sie zu einer ID derselben Webseite scrollen, nennen wir dies interne Verlinkung. In den folgenden Beispielen werden wir Möglichkeiten sehen, interne Verlinkungen über JavaScript-Methoden durchzuführen.
Die Methode scrollIntoView() ist die zuverlässigste Art, zu einer bestimmten ID zu scrollen. Aber der wichtigste Fall ist, den richtigen querySelector zu bekommen.
Nur dann ist es möglich, zu diesem Element zu routen. Dann werden wir auch die Methode scrollTo() verwenden, um die Offset-Bemerkungen einzurichten.
Lassen Sie uns diese Methoden zum besseren Verständnis überprüfen.
Verwenden Sie die scrollIntoView()-Methode, um in JavaScript zur ID zu scrollen
Um in JavaScript zu einer bestimmten ID zu scrollen, können wir die Methode scrollIntoView() verwenden.
Hochscrollen
Um vom Aktionslink zu Elementen im oberen Segment zu scrollen, setzen wir den Parameter von scrollIntoView() auf true. Nach dem Anklicken des Links sorgt dies dafür, dass die Seite gestresst wird und wir das obige Ziel erreichen.
Code-Auszug:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Document</title>
<style>
#blue{
height: 200px;
background: blue;
}
#buff{
height:800px;
}
a{
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<div id="blue"></div>
<div id="buff"></div>
<a href="javascript: scroll();">Get to BLUE</a>
<script>
function scroll(){
var getMeTo = document.getElementById("blue");
getMeTo.scrollIntoView({behavior: 'smooth'}, true);
}
</script>
</body>
</html>
Ausgang:
Runterscrollen
Ebenso setzen wir hier den zusätzlichen Parameter auf false, und somit wird die Differenz erzeugt.
Code-Auszug:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Document</title>
<style>
#blue{
height: 200px;
background: blue;
}
#buff{
height:800px;
}
a{
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<a href="javascript: scroll();">Get to BLUE</a>
<div id="buff"></div>
<div id="blue"></div>
<script>
function scroll(){
var getMeTo = document.getElementById("blue");
getMeTo.scrollIntoView({behavior: 'smooth'}, false);
}
</script>
</body>
</html>
Ausgang:
Verwenden Sie die scrollTo()-Methode mit manueller Ansichtsberechnung, um in JavaScript zur ID zu scrollen
In diesem Fall wählen wir zunächst unser Element aus und stellen dann auch den Offset-Wert ein. Für den nächsten Schritt werden wir die Position der Oberseite des Körpers erfassen und auf ähnliche Weise die oberste Position unserer Elemente über die Methode .getBoundingClientRect() sicherstellen.
Als nächstes führen wir eine allgemeine mathematische Operation durch, um die gewünschten Maße für die Schriftrolle zu erhalten. Der Codezaun demonstriert dies intuitiver.
Code-Auszug:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Document</title>
<style>
#purple{
height: 200px;
background: purple;
}
#buff{
height:800px;
}
a{
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<div id="purple"></div>
<div id="buff"></div>
<a href="javascript: scroll();">Get to Purple</a>
<script>
function scroll(){
const element = document.getElementById('purple');
const offset = 50;
const bodyRect = document.body.getBoundingClientRect().top;
const elementRect = element.getBoundingClientRect().top;
const elementPosition = elementRect - bodyRect;
const offsetPosition = elementPosition - offset;
window.scrollTo({
top: offsetPosition,
behavior: 'smooth'
});
}
</script>
</body>
</html>
Ausgang:
-method-with-manual-calculation-of-the-view.webp)
Verwenden Sie die scrollTo()-Methode mit scrollLeft und scrollTop, um in JavaScript zur ID zu scrollen
Dieses Beispiel impliziert das Setzen der Attribute für die Methode scrollTo(). Die Syntax ist einfach zu verstehen.
Wir nehmen die Instanz unseres Elements und setzen die obere und linke Position des Scrolls über element.scrollTop und element.scrollLeft. Lassen Sie uns in die Codebasis springen.
Code-Auszug:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Document</title>
<style>
#yellow{
height: 200px;
background: yellow;
}
#buff{
height:800px;
}
a{
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<div id="yellow"></div>
<div id="buff"></div>
<a href="javascript: scroll();">Get to yellow</a>
<script>
function scroll(){
var getMeTo = document.getElementById("yellow");
window.scrollTo({
top: getMeTo.scrollTop,
left: getMeTo.scrollLeft});
}
</script>
</body>
</html>
Ausgang:
-method-with-scrollleft-and-scrolltop.webp)
