Ich habe ein paar Hyperlinks auf meiner Seite. Eine FAQ, die Benutzer lesen, wenn sie meinen Hilfebereich besuchen.
Mithilfe von Ankerlinks kann ich die Seite zum Anker scrollen lassen und die Benutzer dorthin führen.
Gibt es eine Möglichkeit, das Scrollen reibungslos zu gestalten?
Beachten Sie jedoch, dass er eine benutzerdefinierte JavaScript-Bibliothek verwendet. Vielleicht bietet jQuery so etwas an?
Antworten:
Update April 2018: Es gibt jetzt eine native Möglichkeit, dies zu tun :
Dies wird derzeit nur in den modernsten Browsern unterstützt.
Für die Unterstützung älterer Browser können Sie diese jQuery-Technik verwenden:
Und hier ist die Geige: http://jsfiddle.net/9SDLw/
Wenn Ihr Zielelement keine ID hat und Sie über seine ID darauf verlinken
name
, verwenden Sie Folgendes :Um die Leistung zu steigern, sollten Sie diesen
$('html, body')
Selektor zwischenspeichern, damit er nicht jedes Mal ausgeführt wird, wenn auf einen Anker geklickt wird:Wenn Sie möchten, dass die URL aktualisiert wird, tun Sie dies innerhalb des
animate
Rückrufs:quelle
scrollTop: $(this.hash).offset().top
statt seinscrollTop: $(this.href).offset().top
?scrollTop: $(href).offset().top - 72
html, body
Objekts hier nicht erforderlich ist. Das Ausführen eines Selektors einmal pro Klick ist nicht wirklich so viel.Die richtige Syntax lautet:
Vereinfachung : TROCKEN
Erklärung von
href*=\\#
:*
bedeutet, dass es mit dem übereinstimmt, was#
char enthält . Also nur passende Anker . Weitere Informationen zur Bedeutung finden Sie hier\\
Das liegt daran, dass das#
ein spezielles Zeichen in der CSS-Auswahl ist, also müssen wir ihm entkommen.quelle
$('a')
,$('a[href*=#]')
um nur Anker-URLs zu bedienen<a href="javascript:$('#test').css('background-color', '#000')">Test</a>
. Sie sollten lieber verwenden$('a[href^=#]')
, um alle URLs abzugleichen, die mit einem Hash-Zeichen beginnen.a[href^=\\#]
Die neue Schärfe in CSS3. Dies ist viel einfacher als jede auf dieser Seite aufgeführte Methode und erfordert kein Javascript. Geben Sie einfach den folgenden Code in Ihr CSS ein und plötzlich zeigen Links, die auf Stellen auf Ihrer eigenen Seite verweisen, eine flüssige Bildlaufanimation.
Danach gleiten alle Links, die auf ein Div zeigen, reibungslos zu diesen Abschnitten.
Bearbeiten: Für diejenigen, die über das oben genannte Tag verwirrt sind. Grundsätzlich ist es ein Link, der anklickbar ist. Sie können dann irgendwo auf Ihrer Webseite ein anderes div-Tag haben
In dieser Hinsicht ist der a-Link anklickbar und führt zu dem # Abschnitt, in diesem Fall ist es unser Div, den wir Abschnitt genannt haben.
Übrigens habe ich stundenlang versucht, dies zum Laufen zu bringen. Die Lösung wurde in einem obskuren Kommentarbereich gefunden. Es war fehlerhaft und funktionierte in einigen Tags nicht. Hat im Körper nicht funktioniert. Es hat endlich funktioniert, als ich es in HTML {} in der CSS-Datei abgelegt habe.
quelle
Das hat perfekt für mich funktioniert
quelle
Ich bin überrascht, dass niemand eine native Lösung veröffentlicht hat, die sich auch darum kümmert, den Hash des Standortes des Browsers entsprechend zu aktualisieren. Hier ist es:
Siehe Tutorial: http://www.javascriptkit.com/javatutors/scrolling-html-bookmark-javascript.shtml
Für Sites mit klebrigen Headern kann
scroll-padding-top
CSS verwendet werden, um einen Offset bereitzustellen.quelle
Nur CSS
Alles was Sie brauchen, um nur dies hinzuzufügen. Jetzt ist das Scrollverhalten Ihrer internen Links reibungslos wie ein Stream-Flow.
Hinweis : Alle aktuellen Browser (
Opera
,Chrome
,Firefox
usw.) diese Funktion unterstützt.Lesen Sie diesen Artikel, um detaillierte Informationen zu erhalten
quelle
Ich schlage vor, diesen generischen Code zu erstellen:
Sie können hier einen sehr guten Artikel sehen: jquery-effet-glatt-scroll-defilement-fluide
quelle
Offiziell: http://css-tricks.com/snippets/jquery/smooth-scrolling/
quelle
Hier gibt es bereits viele gute Antworten - allen fehlt jedoch die Tatsache, dass leere Anker ausgeschlossen werden müssen . Andernfalls erzeugen diese Skripte JavaScript-Fehler, sobald auf einen leeren Anker geklickt wird.
Meiner Meinung nach lautet die richtige Antwort wie folgt:
quelle
Verwenden von JQuery:
quelle
Es gibt native Unterstützung für reibungsloses Scrollen bei Hash-ID-Scrolls.
Sie können einen Blick darauf werfen: https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section2
quelle
Die angegebene Antwort funktioniert, deaktiviert jedoch ausgehende Links. Unten eine Version mit einem zusätzlichen Bonus (Swing) und Respekt für ausgehende Links.
quelle
stop()
URL-Krume funktioniert jedoch nicht wie erwartet: Die Schaltfläche Zurück bringt nicht zurück. Dies liegt daran, dass die Krume nach Abschluss der Animation in der URL festgelegt wird. Es ist besser ohne einen Krümel in der URL, zum Beispiel macht Airbnb das so.HTML
oder Mit absoluter vollständiger URL
jQuery
quelle
Moderne Browser sind heutzutage etwas schneller. Ein setInterval könnte funktionieren. Diese Funktion funktioniert heutzutage gut in Chrome und Firefox. (Etwas langsam in der Safari, hat sich nicht um den Internet Explorer gekümmert.)
quelle
Es gibt eine CSS-Methode, um dies mithilfe des Bildlaufverhaltens zu tun. Fügen Sie die folgende Eigenschaft hinzu.
Und das ist alles. Kein JS erforderlich.
PS: Bitte überprüfen Sie die Browserkompatibilität.
quelle
Hinzufügen dieses:
hebt irgendwie den vertikalen Versatz auf
in Firefox und IE, aber nicht in Chrome. Grundsätzlich scrollt die Seite reibungslos bis zu dem Punkt, an dem sie basierend auf dem Versatz anhalten soll, springt dann aber nach unten, wo die Seite ohne den Versatz hingehen würde.
Der Hash wird zwar am Ende der URL hinzugefügt, durch Zurückdrücken werden Sie jedoch nicht nach oben zurückgeführt. Der Hash wird lediglich aus der URL entfernt und das Anzeigefenster bleibt dort, wo er sich befindet.
Hier ist das vollständige js, das ich benutze:
quelle
Diese Lösung funktioniert auch für die folgenden URLs, ohne dass Ankerlinks zu verschiedenen Seiten unterbrochen werden.
usw.
Ich habe dies noch nicht in allen Browsern getestet.
quelle
Auf diese Weise können Sie jQuery auf einfache Weise ermöglichen, Ihren Ziel-Hash zu erkennen und zu wissen, wann und wo Sie aufhören müssen.
quelle
quelle
Getesteter und verifizierter Code
quelle
Ich habe dies sowohl für "/ xxxxx # asdf" als auch für "#asdf" href-Anker gemacht
quelle
Hier ist die Lösung, die ich für mehrere Links und Anker implementiert habe, für einen reibungslosen Bildlauf:
http://www.adriantomic.se/development/jquery-localscroll-tutorial/ Wenn Sie Ihre Navigationslinks in einem Navigationsbereich eingerichtet und mit dieser Struktur deklariert haben:
und Ihre entsprechenden Anker-Tag-Ziele wie folgt:
Dann laden Sie dies einfach in den Kopf des Dokuments:
Vielen Dank an @Adriantomic
quelle
Wenn Sie eine einfache Schaltfläche auf der Seite haben, mit der Sie zu einem Div scrollen können und die Zurück-Schaltfläche funktionieren soll, indem Sie nach oben springen, fügen Sie einfach diesen Code hinzu:
Dies könnte erweitert werden, um auch zu verschiedenen Divs zu springen, indem der Hash-Wert gelesen und wie bei Joseph Silbers Antwort gescrollt wird.
quelle
Vergessen Sie niemals, dass die Funktion offset () die Position Ihres Elements zum Dokument angibt. Wenn Sie also Ihr Element relativ zu seinem übergeordneten Element scrollen müssen, sollten Sie dies verwenden.
Der entscheidende Punkt ist, scrollTop von scroll-div zu erhalten und es zu scrollTop hinzuzufügen. Wenn Sie diese position () -Funktion nicht ausführen, erhalten Sie immer unterschiedliche Positionswerte.
quelle
Sie können
window.scroll()
mitbehavior: smooth
undtop
auf den versetzten oberen Rand des Ankertags setzen, um sicherzustellen, dass sich das Ankertag oben im Ansichtsfenster befindet.Demo:
Code-Snippet anzeigen
Sie können einfach die CSS-Eigenschaft
scroll-behavior
aufsmooth
(die von den meisten modernen Browsern unterstützt wird) setzen, sodass kein Javascript erforderlich ist.Code-Snippet anzeigen
quelle
Danke fürs Teilen, Joseph Silber. Hier Ihre 2018-Lösung als ES6 mit einer geringfügigen Änderung, um das Standardverhalten beizubehalten (nach oben scrollen):
quelle
Erfordert JQuery und Animationen, um das Tag mit dem angegebenen Namen anstelle der ID zu verankern, während der Hash zur Browser-URL hinzugefügt wird. Behebt auch einen Fehler in den meisten Antworten mit jquery, bei dem dem # -Zeichen kein Escape-Backslash vorangestellt ist. Die Zurück-Schaltfläche navigiert leider nicht richtig zurück zu vorherigen Hash-Links ...
quelle