Scroll Down Button und Back to Top?
Hallo,
ich möchte für eine Website, welche ich für die Schule machen soll, einen Scroll Down Button programmieren, welcher mich beim drauf drücken nach untem zum Inhalt scrollt (Startpunkt ist der Seitenanfang, in meinem Fall ein Bild. Der Inhalt kommt erst nach dem Bild)
Außerdem möchte ich dann auch einen Back to Top Button, welcher mich dann wieder an den Seitenanfang bringt.
Der Scroll Down Button sollte 3 Pfeile sein, welche von oben nach unten blinken. Und der Back to Top Button sollte ein einfacher Kreis
unten rechts sein, mit einem Pfeil nach oben und die Box sollte die Farbe ändern, wenn man mit dem Cursor drauf ist.
Ich habe mal Beispielbidler angefügt
Dafür soll ich JavaScript benutzen.
Leider finde ich nichts passendes im Internet und frage deshalb hier um Hilfe.
Grüße Alex
2 Antworten
(...) einen Scroll Down Button programmieren, welcher mich beim drauf drücken nach untem zum Inhalt scrollt (...) Außerdem möchte ich dann auch einen Back to Top Button (...)
Gib dem Button einen Event Listener, der auf das click-Event lauscht. Bei Auslösen des Events kannst du mit der scrollTo-Funktion nach oben oder unten scrollen.
const scrollingElement = (document.scrollingElement || document.body);
// scroll to bottom:
window.scrollTo({ top: scrollingElement.scrollHeight, behavior: 'smooth' });
// scroll to top:
window.scrollTo({ top: 0, behavior: 'smooth' });
Der Scroll Down Button sollte 3 Pfeile sein, welche von oben nach unten blinken.
Auf Blinkeffekte würde ich prinzipiell immer verzichten, denn sie stören den Seitenbesucher beim Lesen des Seiteninhalts.
Nichtsdestotrotz: Für eine Umsetzung würde ich Inline-SVG verwenden (jeder Pfeil entspricht einem eigenen SVG-Path; nutze SVG Online-Editoren oder suche nach fertigen SVG-Icons). Alle drei SVG-Elemente kannst du anschließend mit CSS animieren. Den passenden Effekt dürftest du erreichen, indem du zeitversetzt die Pfeilfarbe (Beispiel: Pfeil 1 nach 1s, Pfeil 2 nach 2s, Pfeil 3 nach 3s) änderst.
Und der Back to Top Button (...)
Auch hierfür kannst du mit SVG arbeiten. Die Positionierung und Hovereffekte gelingen mit CSS.
Beispiel:
.back-to-top {
bottom: 20px;
position: fixed;
right: 20px;
}
.back-to-top:hover {
fill: red;
}
Leider finde ich nichts passendes im Internet (...)
CSS-, SVG- und JavaScript-Referenzen findest du hier:
Um an eine bestimmte Stelle zu springen gibt es das Prinzip eines "Anker".
Ein Stück ver-scrollen bringt dich nicht zuverlässig an die richtige Stelle.
Hier
HTML/Tutorials/Links/Seiteninterne Verweise – SELFHTML-Wiki
ein Beispiel (auch zum Spielen)