Vielleicht ist der einfachste Weg, dem Benutzer dies anzubieten, ein Link, der auf eine ID im <html>-Element verweist. Also so etwas wie…
<html id="top">
<body>
<!-- the entire document -->
<a href="#top">Jump to top of page</a>
</body>
</html>Aber wir haben hier ein paar Optionen.
Wenn Sie möchten, dass es sanft nach oben scrollt, können Sie das auch in CSS tun, wenn Sie möchten
html {
scroll-behavior: smooth;
}Beachten Sie, dass die Platzierung einer Eigenschaft auf dem HTML-Element wie diese ein alles umfassendes Verhalten ist, über das Sie nicht viel Kontrolle haben.
In diesem Fall verlinken wir auch nicht auf ein fokussierbares Element, was bedeutet, dass sich der Fokus nicht ändert. Das ist wahrscheinlich wichtig, also wäre das besser
<html>
<body>
<a id="top"></a>
<!-- the entire document -->
<a href="#top">Jump to top of page</a>
</body>
</html>Es ist besser, weil der Fokus auf das Anker-Tag wechselt, was gut für Menschen ist, die eine Tastatur oder assistierende Technologie verwenden.
Diese erfordern jedoch Klicks. Möglicherweise müssen Sie das Scrollen über JavaScript auslösen, in diesem Fall
window.scrollTo(0, 0);…ist eine sichere Methode, um das Fenster (oder jedes andere Element) wieder nach oben zu scrollen. Das Scrollverhalten davon wird ebenfalls durch CSS bestimmt, aber wenn Sie das nicht tun, können Sie die Glätte in JavaScript erzwingen
window.scroll({
top: 0,
left: 0,
behavior: 'smooth'
});Für eine umfassendere Information zum sanften Scrollen, haben wir eine Seite dafür.
Ich würde vorschlagen, die Oberseite zu einem Tag-Span zu machen. Ein Anker-Tag ohne href wird von Barrierefreiheits-Scannern markiert.
Ich frage mich immer, warum nicht body, gibt es eine Regel dagegen, das body-Tag hier zu verwenden?
Meiner Meinung nach ist die Verwendung von „scroll: smooth“ außer Kontrolle geraten.
Das Durchsuchen langer Artikel wird mühsam, wenn man gezwungen ist, mehrere Sekunden auf das Ende der Scroll-Animation zu warten. Dieses Problem wird auf Mobilgeräten noch verschärft, wo der kleine Bildschirm zu großen vertikalen Seiten führt und sich negativ auf die Akkulaufzeit auswirkt, da die GPU beansprucht wird.
Das ist fantastisch und erinnert mich daran, warum Sie css-tricks auch erstellt haben. Nette Snippets zur Verbesserung der Leistung von Entwicklern.
Ich habe in letzter Zeit bemerkt, dass Mobilgeräte dies manchmal benötigen, um den Benutzer für weitere Navigationen außerhalb der Hauptarchitektur, die sich normalerweise im Footer befindet, wieder nach oben zu bringen.
Es ist nicht notwendig, einem Element die ID top zu geben. Standardmäßig laden alle wichtigen Browser den Anfang der Seite, indem sie sich einfach auf diese ID oder nur auf # beziehen. Z.B.
<a href="#top">oder<a href="#">Danke Chris!
Nur eine kurze Anmerkung: Seien Sie vorsichtig mit scroll-behavior, das nicht mit iOS Safari kompatibel ist :) https://caniuse.com/#search=scroll-behavior
Ich habe festgestellt, dass Back-to-Top-Anker funktionieren, auch wenn die ID/Klasse für „top“ nicht definiert ist. Allerdings benötigt sanftes Scrollen ein Ziel-Anker oder ein Element mit einer definierten ID „top“, um zu funktionieren. Warum das so ist, weiß ich nicht. Ist „top“ bereits im DOM definiert?
Wenn dies verwendet wird, um auf einen bestimmten Teil einer Seite zu verweisen, funktioniert dies nicht wirklich, wenn eine Website eine feste Navigationsleiste hat, oder? Die Höhe der Navigationsleiste wird wahrscheinlich nicht berücksichtigt, wenn zu einem bestimmten Ziel gescrollt wird. Ich meine, das Ziel wird unter der Navigationsleiste liegen und somit unsichtbar sein.