Wie kann ich mit JavaScript an den Anfang der Seite blättern? Die Bildlaufleiste, die sofort an den Anfang der Seite springt, ist ebenfalls wünschenswert, da ich nicht auf einen reibungslosen Bildlauf aus bin.
Antworten
Zu viele Anzeigen?
object-Object
Punkte
1377
Sandeep Gantait
Punkte
791
Gianluca Casati
Punkte
2495
Motivation
Diese einfache Lösung funktioniert von Haus aus und ermöglicht einen reibungslosen Bildlauf zu jeder beliebigen Position.
Es vermeidet die Verwendung von Ankerlinks (die mit # ), die meiner Meinung nach nützlich sind, wenn man auf einen Abschnitt verlinken will, aber in manchen Situationen nicht so bequem sind, besonders wenn sie auf den Anfang zeigen, was zu zwei verschiedenen URLs führen könnte, die auf denselben Ort zeigen ( http://www.example.org y http://www.example.org/# ).
Lösung
Setzen Sie eine id zu dem Tag, zu dem Sie blättern wollen, zum Beispiel zu Ihrem ersten Abschnitt die diese Frage beantwortet, aber die id könnte überall auf der Seite platziert werden.
<body>
<section id="top">
<!-- your content -->
</section>
<div id="another"><!-- more content --></div>Dann können Sie als Schaltfläche einen Link verwenden, bearbeiten Sie einfach die onclick Attribut mit einem Code wie diesem.
<a onclick="document.getElementById('top').scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })">Click me</a>Wenn das Argument der document.getElementById es el id des Tags, zu dem Sie nach dem Klicken blättern möchten.
Justin Liu
Punkte
543
Jon Story
Punkte
2629
Wenn Sie keinen flüssigen Bildlauf wünschen, können Sie schummeln und die Animation des flüssigen Bildlaufs stoppen, sobald Sie sie starten... etwa so:
$(document).ready(function() {
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "1");
$('html, body').stop(true, true);
//Anything else you want to do in the same action goes here
return false;
});
});Ich habe keine Ahnung, ob das empfohlen/erlaubt ist, aber es funktioniert :)
Wann würden Sie das verwenden? Ich bin mir nicht sicher, aber vielleicht, wenn Sie einen Klick verwenden möchten, um eine Sache mit Jquery zu animieren, aber eine andere ohne Animation zu tun? dh öffnen Sie ein Slide-in-Admin-Login-Panel am oberen Rand der Seite, und sofort an die Spitze springen, um es zu sehen.
