Blättern Sie reibungslos auf bestimmtes element auf Seite
Ich möchte über 4 buttons/links auf den Anfang der Seite, und unter Ihnen die Inhalte.
Auf die Tasten die ich diesen code:
<a href="#idElement1">Scroll to element 1</a>
<a href="#idElement2">Scroll to element 2</a>
<a href="#idElement3">Scroll to element 3</a>
<a href="#idElement4">Scroll to element 4</a>
Und unter links wird es sein, Inhalte:
<h2 id="idElement1">Element1</h2>
content....
<h2 id="idElement2">Element2</h2>
content....
<h2 id="idElement3">Element3</h2>
content....
<h2 id="idElement4">Element4</h2>
content....
Es jetzt funktioniert, aber kann nicht machen es so Aussehen mehr glatt.
Ich habe diesen code, aber kann es nicht funktionieren.
$('html, body').animate({
scrollTop: $("#elementID").offset().top
}, 2000);
Irgendwelche Vorschläge? Danke.
Edit: und der Geige: http://jsfiddle.net/WxJLx/2/
mögliche Duplikate von Glatt-JavaScript/jQuery-scroll-element
ich habe zu Fragen, hast du den animieren-code in ein click-Ereignis?
im fürchte, ich weiß nicht, was fragst du mich,
$('#idElement1').onclick=function(){/*hier ist Ihre smothscroll code*/}
können Sie mir zeigen, dass fiddle bitte: jsfiddle.net/WxJLx/2
ich habe zu Fragen, hast du den animieren-code in ein click-Ereignis?
im fürchte, ich weiß nicht, was fragst du mich,
$('#idElement1').onclick=function(){/*hier ist Ihre smothscroll code*/}
können Sie mir zeigen, dass fiddle bitte: jsfiddle.net/WxJLx/2
InformationsquelleAutor M P | 2013-07-18
Du musst angemeldet sein, um einen Kommentar abzugeben.
Nur aus diesem javascript-Lösung nur unten.
Einfache Nutzung:
Engine-Objekt (die Sie anpassen können mit filter -, fps-Werte):
InformationsquelleAutor Geri
Super glatt mit
requestAnimationFrame
Reibungslosen gerendert, scrollen animation könnte man
Fenster.requestAnimationFrame()
die führt besser mit der Darstellung als normalesetTimeout()
Lösungen.Ein einfaches Beispiel sieht wie folgt aus. Funktion
step
heißt für den browser, jedes Animations-frame und ermöglicht eine bessere Zeit-management von repaints, und damit die Leistung erhöht.Element-Y-position verwenden von Funktionen in anderen Antworten oder die in meinem unten genannten fiddle.
Habe ich ein bisschen mehr anspruchsvolle Funktion mit einer Abschwächung zu unterstützen und die ordnungsgemäße scrollen nach unten-die meisten Elemente:
https://jsfiddle.net/s61x7c4e/
Froh, dass ich helfen konnte! Einmal habe ich verwendet, sweet-scrollen - Bibliothek, aber es wollte irgendwie nicht so gut spielen mit Reagieren. Man wiederverwenden konnte einige API oder code aus.
Das ist so krank. Danke!
InformationsquelleAutor Daniel Sawka
Smooth-scrolling - look ma no jQuery
Basierend auf in einem Artikel auf itnewb.com machte ich einen demo-plunk, glatt Blättern ohne externe Bibliotheken.
Javascript ist ganz einfach. Zunächst eine Hilfsfunktion, die zur Verbesserung der cross-browser-Unterstützung, um zu bestimmen, die aktuelle position.
Dann eine Funktion zum bestimmen der position des Ziel-element - das einzige, wo wir möchten, Blättern Sie zu.
Und die core-Funktion für das scrollen von
Nennen Sie nur Folgendes tun. Sie erstellen einen link, der verweist auf ein anderes element mit der id als Referenz für eine Ziel-Anker.
Copyright
In der Fußzeile itnewb.com das folgende geschrieben:
The techniques, effects and code demonstrated in ITNewb articles may be used for any purpose without attribution (although we recommend it)
(2014-01-12)Danke, nur hat mich gerettet einige Zeit 🙂 ich habe auch zu
smoothScroll({eID, padding = 0})
und dannstopY += padding;
nachlet stopY = elmYPosition(eID);
haben einige padding around-element und nicht um einen Bildlauf zum genauen elementAusführung von string als Funktion.... 🙁 Warum nicht einfach:
setTimeout(window.scrollTo.bind(null, 0, leapY), timer * speed);
InformationsquelleAutor surfmuggle
Ich habe mit diesem für eine lange Zeit:
Verwendung:
scrollToItem(element)
woelement
istdocument.getElementById('elementid')
zum Beispiel.wollte nur hinzufügen - mein Ziel war nicht, verwenden keine externen Bibliotheken ist es nicht sinnvoll, zu laden riesige jquery nur zur Seite scrollen 😉
Hey, Danke für die Lösung. 🙂 Können Sie mir bitte sagen, was ist die Verwendung von Variablen
window._TO
. Ich bin nicht in der Lage, herauszufinden, was es tut und warum sind wir mitclearTimeout
. Ich habe entferntclearTimeout
und es funktioniert für mich vollkommen in Ordnung.Tripathi, wenn Sie die Funktion erneut aufrufen, bevor Sie beendet wurde, verhält Sie sich ganz schlecht - weil es in Bewegung zu halten, um den ersten Punkt, und wenn der zweite Aufruf möchten, verschieben Sie es an anderer Stelle, es wird nur hin-und wieder zurück - für immer
InformationsquelleAutor Thomas
Variation von @tominko Antwort.
Ein wenig glattere animation und gelöst problem mit unendlichen aufgerufen setTimeout(), wenn einige Elemente können nicht allign zu top-Ansichtsfenster.
InformationsquelleAutor Andrzej Sala
Frage 5 Jahre her und ich war den Umgang mit
smooth scroll
und fühlte, was eine einfache Lösung ist es Wert, um diejenigen, die sind suchen. Alle Antworten sind gut, aber hier gehen Sie einfach.rufen Sie einfach die
smoothScroll
Funktion aufonClick
Fall auf Ihre Quelleelement
.Hinweis: Bitte überprüfen Sie die Kompatibilität hier
Danke für die Meldung, Aktualisiert sich meine Antwort.
InformationsquelleAutor Sanjay Shr
können Sie dieses plugin verwenden. Tut genau, was Sie wollen.
http://flesler.blogspot.com/2007/10/jqueryscrollto.html
und hätte zu importieren, die alle jQuery-lib zu Blättern. Besser getan, mit vanila js wie andere Antworten.
InformationsquelleAutor Feedthe
Wenn man scrollen zu müssen, um ein element innerhalb eines div-da ist meine Lösung basiert auf Andrzej Sala Antwort:
InformationsquelleAutor Kuba Szostak
Kannst du auch dieses tolle Blog - einige sehr einfache Möglichkeiten, dies zu erreichen 🙂
https://css-tricks.com/snippets/jquery/smooth-scrolling/
Wie (aus dem blog)
- und Sie können auch das element "top" - position, wie unten (oder auf eine andere Weise)
InformationsquelleAutor aniltilanthe
Smooth-scrolling mit jQuery.ScrollTo
Verwenden die jQuery ScrollTo-plugin müssen Sie die folgenden
href
Punkte zu anderen Elementen.idErstellen der links
Erstellen der target-Elemente, die hier nur die ersten beiden werden angezeigt, die anderen Rubriken sind eingerichtet auf die gleiche Weise. Um zu sehen, ein anderes Beispiel habe ich noch einen link zurück zur navigation
a.toNav
Einstellung der Verweise auf die Skripte. Ihr Pfad zu den Dateien kann unterschiedlich sein.
Verdrahtung es alle bis
Den code unten entlehnt ist jQuery easing plugin
Voll arbeiten demo auf plnkr.co
Können Sie einen Blick auf die soucre-code für die demo.
Update, Mai 2014
Aufgrund einer anderen Frage, die ich stieß auf eine andere Lösung von kadaj. Hier jQuery animieren wird verwendet, um navigieren Sie zu einem element in einem
<div style=overflow-y: scroll>
Was haben Sie versucht den Fehler zu finden? Sie sind vertraut mit den chrome dev tools - Sie machen es super einfach zu erkennen Fehler:
$('a[href^="#"]').click(function(){
in Zeile 360 von anchovyluxury.com/yachts/services Haben Sie weitere Fragen dazu, wie zu scrollen reibungslos?Ich habe in diesem code, mit dem pops up-Fenster, dass jquery arbeitet. Und mein code funktioniert in der Geige, so weiß nicht, wo das problem ist.
InformationsquelleAutor surfmuggle