Automatisch zum Seitenende blättern in JavaScript
Mehvish Ashiq
11 Dezember 2023
-
Verwenden Sie die JavaScript-Funktion
scrollTo, um nach unten zu scrollen -
Verwenden Sie die JavaScript-Funktion
scrollIntoView, um nach unten zu scrollen -
Verwenden Sie die JavaScript-Funktion
scrollTop, um nach unten zu scrollen -
Verwenden Sie die JavaScript-Funktion
ScrollingElement, um nach unten zu scrollen -
Verwenden Sie die JavaScript-Funktion
scrollBy, um nach unten zu scrollen
Wir möchten Sie über verschiedene Methoden informieren, um in JavaScript automatisch zum Ende der Seite zu scrollen. In diesem Tutorial lernen Sie auch, mit und ohne Animation zu bestimmten Koordinaten auf dem Bildschirm zu scrollen.
Verwenden Sie die JavaScript-Funktion scrollTo, um nach unten zu scrollen
HTML Quelltext:
<!DOCTYPE html>
<html>
<head>
<title>Scroll Automatically</title>
</head>
<body id='main_body'>
<button id="bottompage">Bottom</button>
<div id="headingone">
<h1>Heading One</h1>
<img src="https://media.istockphoto.com/photos/programming-code-abstract-technology- background-of-software-developer-picture-id1294521676?
b=1&k=20&m=1294521676&s=170667a&w=0&h=7pqhrZcqqbQq43Q0_TD0Y_YjInAyvA9xiht9bto030U=" alt="Programming Picture">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div id="headingtwo">
<h1>Heading Two</h1>
<img src="https://media.istockphoto.com/photos/programming-code-abstract-technology- background-of-software-developer-picture-id1294521676?
b=1&k=20&m=1294521676&s=170667a&w=0&h=7pqhrZcqqbQq43Q0_TD0Y_YjInAyvA9xiht9bto030U=" alt="Programming Picture">
<img src="https://media.istockphoto.com/photos/programming-code-abstract-technology- background-of-software-developer-picture-id1294521676?
b=1&k=20&m=1294521676&s=170667a&w=0&h=7pqhrZcqqbQq43Q0_TD0Y_YjInAyvA9xiht9bto030U=" alt="Programming Picture">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div id="headingthree">
<h1>Heading Three</h1>
<img src="https://media.istockphoto.com/photos/programming-code-abstract-technology- background-of-software-developer-picture-id1294521676?
b=1&k=20&m=1294521676&s=170667a&w=0&h=7pqhrZcqqbQq43Q0_TD0Y_YjInAyvA9xiht9bto030U=" alt="Programming Picture">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<h1> Hi There! </h1>
</body>
</html>
CSS-Code:
button{
float:right;
background-color:yellow;
color:red;
}
JavaScript-Code:
document.querySelector('#bottompage').addEventListener('click', () => {
window.scrollTo(0, document.body.scrollHeight);
})
Der oben angegebene Code wählt das Tag-Element aus, dessen ID-Wert bottompage ist. Immer wenn darauf geklickt wird, wird ein Ereignis ausgelöst, das zum Ende der Seite scrollt (vertikales Scrollen), da x auf 0 und y auf document.body.scrollHeight, also 1655px, gesetzt ist.
Mit der Funktion scrollTo wird das document zu den angegebenen Koordinaten der Webseite gescrollt. Diese Methode funktioniert, wenn der Scrollbalken sichtbar und das document im Vergleich zum Bildschirm gross ist.
Beide Parameter der Methode scrollTo() sind erforderlich. Der Parameter x gibt an, wie viel horizontal in Pixel gescrollt werden soll, und y ungefähr vertikal in Pixel.
Sie denken vielleicht darüber nach, wie die Höhe berechnet wird? Dafür können Sie dies lesen, um alle Berechnungen für die Höhe zu verstehen.
Verwenden Sie die JavaScript-Funktion scrollIntoView, um nach unten zu scrollen
HTML Quelltext:
<!DOCTYPE html>
<html>
<head>
<title>Scroll Automatically</title>
</head>
<body id='main_body'>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<a id="heading_one" href="javascript:void(0)">Heading 1</a>
<a id="heading_two" href="javascript:void(0)">Heading 2</a>
<a id="heading_three" href="javascript:void(0)">Heading 3</a>
<div id="headingone">
<h1>Heading One</h1>
<img src="https://media.istockphoto.com/photos/programming-code-abstract-technology- background-of-software-developer-picture-id1294521676?
b=1&k=20&m=1294521676&s=170667a&w=0&h=7pqhrZcqqbQq43Q0_TD0Y_YjInAyvA9xiht9bto030U=" alt="Programming Picture">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div id="headingtwo">
<h1>Heading Two</h1>
<img src="https://media.istockphoto.com/photos/programming-code-abstract-technology- background-of-software-developer-picture-id1294521676?
b=1&k=20&m=1294521676&s=170667a&w=0&h=7pqhrZcqqbQq43Q0_TD0Y_YjInAyvA9xiht9bto030U=" alt="Programming Picture">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<ul>
<li>List one in heading two</li>
<li>List two in heading two</li>
<li id="list3">List three in heading two</li>
<li>List four in heading two</li>
<li>List five in heading two</li>
<li>List six in heading two</li>
<li>List seven in heading two</li>
<li>List eight in heading two</li>
</ul>
</div>
<div id="headingthree">
<h1>Heading Three</h1>
<img src="https://media.istockphoto.com/photos/programming-code-abstract-technology- background-of-software-developer-picture-id1294521676?
b=1&k=20&m=1294521676&s=170667a&w=0&h=7pqhrZcqqbQq43Q0_TD0Y_YjInAyvA9xiht9bto030U=" alt="Programming Picture">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<h1> Hi There! </h1>
</body>
</html>
CSS-Code:
button{
float:right;
background-color:yellow;
color:red;
}
a{
display: block;
}
JavaScript-Code:
let hone = document.querySelector('#heading_one');
let listthree = document.querySelector('#list3');
hone.addEventListener('click', navigatelistthree, false);
function navigatelistthree(e) {
listthree.scrollIntoView({behavior: 'smooth'});
}
In diesem Beispielcode holt der querySelector das erste Element, das den Wert des id-Attributs hat, als heading_one und speichert es in der hone-Variablen. Danach wählt es das erste Element mit dem Wert id als list3 aus und speichert es in der Variablen namens listthree.
Immer wenn Sie auf den Hyperlink Heading 1 klicken, wird die Methode navigatelistthree ausgeführt. Diese Funktion führt Sie zum dritten Listenpunkt unter Heading 2, geschrieben als List three in heading two.
Die Methode scrollIntoView hilft Ihnen, ein Element in der Ansicht zu scrollen. Es wird verwendet, wenn Sie möchten, dass ein bestimmtes Element hervorgehoben und gescrollt wird.
Diese Methode akzeptiert einen Parameter; es kann ein boolescher Wert oder ein Objekt sein.
Mit scrollIntoView() können Sie direkt zu dem gewünschten Element springen. Oder Sie können die Eigenschaft behavior verwenden, um reibungslos zu scrollen.
Überprüfen Sie diesen Link, um mehr über die Parameter der Funktion scrollIntoView() zu erfahren.
Verwenden Sie die JavaScript-Funktion scrollTop, um nach unten zu scrollen
HTML Quelltext:
<div id="boxcontent">
<div class="maincontent">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<button id="button">Scroll to Bottom</button>
CSS-Code:
#boxcontent {
height: 200px;
width: 300px;
overflow: scroll;
width: 300px;
}
.maincontent {
width: 100%;
height: 400px;
}
JavaScript-Code:
document.getElementById('button').addEventListener('click', function() {
var element = document.getElementById('boxcontent');
element.scrollTop = element.scrollHeight;
});
Erstens wird das Element, dessen ID-Wert button ist, ausgewählt, wenn Sie auf die Schaltfläche Scroll to Bottom klicken. Dann wird ein anderes Element ausgewählt, dessen Wert des id-Attributs boxcontent ist, und in der Variablen element gespeichert.
Sie gelangen zum Ende der Inhaltsbox, die scrollbar ist, weil der Wert von element.scrollHeight dem element.scrollTop zugewiesen ist. Sie können weitere Details hier zum Üben überprüfen.
Die Eigenschaft namens scrollTop in JavaScript setzt oder erhält die Anzahl Pixel, um die der Inhalt eines Elements vertikal gescrollt wird.
Der Wert scrollTop ist Null, wenn die Eigenschaft non-scrollable einem Element zugeordnet ist. Oder das Element hat keinen Überlauf. Beachten Sie, dass sich diese Eigenschaft bei negativen Werten auf NULL setzt.
Verwenden Sie die JavaScript-Funktion ScrollingElement, um nach unten zu scrollen
HTML Quelltext:
<!DOCTYPE html>
<html>
<head>
<title>Scroll Automatically</title>
</head>
<body id='main_body'>
<button id="bottompage">Bottom</button>
<div id="headingone">
<h1>Heading One</h1>
<img src="https://media.istockphoto.com/photos/programming-code-abstract- technology-background-of-software-developer-picture-id1294521676? b=1&k=20&m=1294521676&s=170667a&w=0&h=7pqhrZcqqbQq43Q0_TD0Y_YjInAyvA9xiht9bto030U=" alt="Programming Picture">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div id="headingtwo">
<h1>Heading Two</h1>
<img src="https://media.istockphoto.com/photos/programming-code-abstract-technology- background-of-software-developer-picture-id1294521676? b=1&k=20&m=1294521676&s=170667a&w=0&h=7pqhrZcqqbQq43Q0_TD0Y_YjInAyvA9xiht9bto030U=" alt="Programming Picture">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div id="headingthree">
<h1>Heading Three</h1>
<img src="https://media.istockphoto.com/photos/programming-code-abstract-technology- background-of-software-developer-picture-id1294521676? b=1&k=20&m=1294521676&s=170667a&w=0&h=7pqhrZcqqbQq43Q0_TD0Y_YjInAyvA9xiht9bto030U=" alt="Programming Picture">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<h1> Hi There! </h1>
</body>
</html>
CSS-Code:
button{
float:right;
background-color:yellow;
color:red;
}
JavaScript-Code:
document.querySelector('#bottompage').addEventListener('click', () => {
var scrollingElement = (document.scrollingElement || document.body);
scrollingElement.scrollTop = scrollingElement.scrollHeight;
})
Der oben angegebene Code wählt das Tag-Element mit der id als bottompage aus.
Ein Ereignis wird ausgelöst, wenn Sie auf das Element klicken, dessen ID-Wert bottompage ist. Danach wird die Referenz des Root-Elements (HTML-Tag) oder des body-Tags (je nachdem, was verfügbar ist) in einer Variablen namens scrollingElement gespeichert.
Außerdem wird der Wert von scrollTop von 0px auf 1310px geändert, weil der Wert von scrollingElement.scrollHeight zu scrollingElement.scrollTop zugewiesen wurde.
Verwenden Sie die JavaScript-Funktion scrollBy, um nach unten zu scrollen
HTML Quelltext:
<!DOCTYPE html>
<html>
<head>
<title>Scroll Automatically</title>
</head>
<body id='main_body'>
<div id="headingone">
<h1>Heading One</h1>
<img src="https://media.istockphoto.com/photos/programming-code-abstract-technology- background-of-software-developer-picture-id1294521676? b=1&k=20&m=1294521676&s=170667a&w=0&h=7pqhrZcqqbQq43Q0_TD0Y_YjInAyvA9xiht9bto030U=" alt="Programming Picture">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div id="headingtwo">
<h1>Heading Two</h1>
<img src="https://media.istockphoto.com/photos/programming-code-abstract-technology- background-of-software-developer-picture-id1294521676? b=1&k=20&m=1294521676&s=170667a&w=0&h=7pqhrZcqqbQq43Q0_TD0Y_YjInAyvA9xiht9bto030U=" alt="Programming Picture">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div id="headingthree">
<h1>Heading Three</h1>
<img src="https://media.istockphoto.com/photos/programming-code-abstract-technology- background-of-software-developer-picture-id1294521676? b=1&k=20&m=1294521676&s=170667a&w=0&h=7pqhrZcqqbQq43Q0_TD0Y_YjInAyvA9xiht9bto030U=" alt="Programming Picture">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</body>
</html>
CSS-Code:
body{
background-color:lightgray;
}
h1{
color:red;
}
JavaScript-Code:
let scrollID;
let stopped = true;
let scrollSpeed = 2; // 1 - Fast | 2 - Medium | 3 - Slow
let scrollInterval = scrollSpeed * 3;
function startScrolling() {
let ID = setInterval(function() {
window.scrollBy(0, 2);
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
// Reached end of page
stopScroll();
}
}, scrollInterval);
return ID;
}
function stopScroll() {
clearInterval(scrollID);
}
document.body.addEventListener('keypress', function(event) {
if (event.which == 13 || event.keyCode == 13) {
// It's the 'Enter' key
if (stopped == true) {
scrollID = startScrolling();
stopped = false;
} else {
stopScroll();
stopped = true;
}
}
}, true);
Wir haben die Funktion scrollBy innerhalb der Methode setInterval verwendet, um das Scrollen in diesem Beispielcode zu animieren.
Die scrollBy-Methode wird verwendet, wenn Sie möchten, dass Ihre Seite bis zu einer bestimmten Anzahl von Pixeln gescrollt wird. Die Funktion scrollBy benötigt zwei Parameter, x und y (beide sind erforderlich).
Die Methode setInterval() ruft eine Funktion in einem bestimmten Intervall auf. innerHeight gibt die Innenhöhe des Fensters (in Pixel) zurück. Das scrollY gibt die Anzahl Pixel zurück, um die das document jetzt vertikal gescrollt wird.
Die schreibgeschützte Eigenschaft namens offsetHeight gibt die Höhe eines Elements (in unserem Beispiel das Tag body) als Ganzzahl zurück. Diese Höhe beinhaltet Rahmen und vertikale Polsterung.
Der obige Code scrollt die Webseite, wenn die Enter-Taste gedrückt wird. Und stoppen Sie das Scrollen auf zwei Arten, entweder wird die Taste Enter erneut gedrückt oder die Summe aus window.innerHeight und window.scrollY ist grösser oder gleich document.body.offsetHeight.
Autor: Mehvish Ashiq
