Wie programmiere ich einen "Nach oben-Button" mit HTML?

Hallo, Ich bin dabei eine Website für die Schule zu programmieren und bin noch nicht so Erfahren mit HTML, daher meine Frage: Wie programmiere ich so einen runden Button mit Pfeil nach oben, der rechts unten erscheint, wenn ich ein bisschen runtergescrollt habe und wenn ich drauf klicke mich automatisch wieder nach oben scrollt?

Answer 1

[FaTech]

<a href="#">Top</a>

oder

<button class="top">Top</button>
<script>
document.getElementsByClassName("top")[0].addEventListener(()=>{
  window.location.href = "#";
});
</script>

Andernfalls sollte das hiermit auch smooth gehen: (CSS)

scroll-behavior: smooth;

https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section2

Comments

[iNeedHelp961]

Geht auch simpler.

[FaTech]

@iNeedHelp961

Dann teile doch bitte deine Gedanken mit. Deine 3 Worte weisen keinen Beweis dafür nach

[iNeedHelp961]

@FaTech

Ich meine bei deinem Javascript Teil. Mit jQuery funktioniert sowas besser, bei Javascript kriege ich ganz gerne Mal einen Not found Fehler.

[FaTech]

@iNeedHelp961

Ja, natürlich geht auch jQuery. Wenn man auf der Seite, wovon ich mal ausgehe, kaum JavaScript hat, dann wäre das einfach viel zu viel, was man einbinden müsste. jQuery bietet ja viel mehr, als nur die eine Funktionalität. Wenn du bei JS einen NotFound Fehler bekommst, dann machst du eindeutig was falsch. jQuery macht es ja nicht anders und dort geht es auch

Answer 2

[iNeedHelp961]

Leg ganz oben irgendwo eine id rein. z.B. machst du oben irgendwo folgende rein:

id="anker1"

Gut, jetzt hast du oben eine id. Denn <a> Tag kennst du vermutlich bereits.

Jetzt kannst du machen:

<a href="#anker1">Nach Oben</a>

So. Das war's auch schon. und damit es smooth ist geht auch, wie FaTech sagte, in CSS scroll-behavior: smooth;

Es würde übrigens auch nur ein # ohne anker1 gehen und oben eine id setzen könntest du dir sparen. Hab es jetzt aber direkt so gezeigt weil ich Mal vermute das du beides brauchen wirst.

Woher ich das weiß: eigene Erfahrung

Answer 3

[421054]

Das Einfachste wäre eine passende Grafik, für die ein Anker-Link hinterlegt ist.

Dazu muss natürlich ein passend benannter Anker im oberen Teil der Seite angelegt werden.