Diese Funktion funktioniert gut. Es rollt den Körper zum Versatz eines gewünschten Containers
function scrolear(destino){
var stop = $(destino).offset().top;
var delay = 1000;
$('body').animate({scrollTop: stop}, delay);
return false;
}
Aber nicht in Firefox. Warum?
-BEARBEITEN-
Um den doppelten Auslöser in der akzeptierten Antwort zu behandeln, empfehle ich, das Element vor der Animation anzuhalten:
$('body,html').stop(true,true).animate({scrollTop: stop}, delay);
Antworten:
Firefox platziert den Überlauf auf der
html
Ebene, sofern er nicht speziell für ein anderes Verhalten ausgelegt ist.Verwenden Sie, um es in Firefox zum Laufen zu bringen
Arbeitsbeispiel
Die CSS-Lösung besteht darin, die folgenden Stile festzulegen:
Ich würde annehmen, dass die JS-Lösung am wenigsten invasiv wäre.
Aktualisieren
Ein Großteil der folgenden Diskussion konzentriert sich auf die Tatsache, dass das Animieren
scrollTop
von zwei Elementen dazu führen würde, dass der Rückruf zweimal aufgerufen wird. Browser-Erkennungsfunktionen wurden vorgeschlagen und anschließend veraltet, und einige sind wohl ziemlich weit hergeholt.Wenn der Rückruf idempotent ist und nicht viel Rechenleistung erfordert, ist das zweimalige Auslösen möglicherweise kein Problem. Wenn mehrere Aufrufe des Rückrufs wirklich ein Problem darstellen und Sie die Funktionserkennung vermeiden möchten, ist es möglicherweise einfacher zu erzwingen, dass der Rückruf nur einmal innerhalb des Rückrufs ausgeführt wird:
quelle
$(jQuery.browser.webkit ? "body": "html").animate(...);
$(jQuery.browser.mozilla ? "html" : "body").animate(...);
. Es wäre großartig, nicht das Durchsuchen von Sniffing zu verwenden, sondern die Funktionserkennung. Ich bin mir nicht sicher, wie ich die Feature-Erkennung im CSS durchführen solljQuery.browser
ist veraltet und fehlt in der neuesten jQuery-Versionwindow.scroll
nicht animiert. Sie könnten natürlich Ihr eigenes Ding mit Intervallen und rollenscrollBy
. Wenn Sie das noch vereinfachen möchten, müssen Sie plötzlich viel Code für einen eher kleinen Aspekt Ihres Produkts schreiben.Das Erkennen von Funktionen und das anschließende Animieren eines einzelnen unterstützten Objekts wäre nett, aber es gibt keine einzeilige Lösung. In der Zwischenzeit können Sie hier ein Versprechen verwenden, um einen einzelnen Rückruf pro Ausführung durchzuführen.
UPDATE: So können Sie stattdessen die Feature-Erkennung verwenden. Dieser Codeabschnitt muss vor Ihrem Animationsaufruf ausgewertet werden:
Verwenden Sie nun die Variable, die wir gerade als Selektor für die Bildlaufanimation definiert haben, und verwenden Sie die reguläre Syntax:
quelle
html
und manchmal zurückzukehrenbody
. Hier ist mein Code, nachdem ich die Funktion deklariert habe.var scrollTopElement; setTimeout( function() { scrollTopElement = getScrollTopElement(); console.log(scrollTopElement); }, 1000);
Vielen Dank dafür, er hat mein Problem gelöst.html
anstattbody
wie angenommen. Dies ist nur möglich, wenn Sie bis zum Ende der Webseite gescrollt und neu geladen haben. Andernfalls funktioniert es.Ich habe ewig versucht herauszufinden, warum mein Code nicht funktioniert -
Das Problem war in meinem CSS -
Ich habe es
auto
stattdessen eingestellt (und war besorgt darüber, warum es überhaupt eingestellt wurde100%
). Das hat es für mich behoben.quelle
Vielleicht möchten Sie dem Problem mit einem Plugin ausweichen - genauer gesagt meinem Plugin :)
Im Ernst, obwohl das Grundproblem längst behoben ist (verschiedene Browser verwenden unterschiedliche Elemente für das Scrollen im Fenster), gibt es auf der ganzen Linie einige nicht triviale Probleme, die Sie stören können:
body
undhtml
hat seine Probleme ,Ich bin offensichtlich voreingenommen, aber jQuery.scrollable ist tatsächlich eine gute Wahl, um diese Probleme anzugehen. (Tatsächlich kenne ich kein anderes Plugin, das sie alle handhabt.)
Darüber hinaus können Sie die Zielposition - die Position, zu der Sie scrollen - mit der
getScrollTargetPosition()
Funktion in diesem Kern kugelsicher berechnen .All das würde dich verlassen
quelle
Vorsicht davor. Ich hatte das gleiche Problem, weder Firefox noch Explorer scrollen mit
Also habe ich verwendet, wie David sagte
Großartig, es hat funktioniert, aber neues Problem, da es zwei Elemente gibt, body und html, wird die Funktion zweimal ausgeführt, dh do X wird zweimal ausgeführt.
versuchte es nur mit 'html' und Firefox und Explorer funktionieren, aber jetzt unterstützt Chrome dies nicht.
Also brauchte man Body für Chrome und HTML für Firefox und Explorer. Ist es ein jQuery-Fehler? Ich weiß es nicht.
Passen Sie einfach auf Ihre Funktion auf, da sie zweimal ausgeführt wird.
quelle
Ich würde empfehlen , nicht auf Berufung
body
nochhtml
als eine tragbare Lösung. Fügen Sie einfach ein Div in den Body ein, das die gescrollten Elemente enthalten soll, und gestalten Sie es so, dass das Scrollen in voller Größe ermöglicht wird:(unter der Annahme , dass
display:block;
undtop:0;left:0;
sind Standardwerte , die Ihr Ziel übereinstimmt), dann verwenden Sie$('#my-scroll')
für Ihre Animationen.quelle
Das ist der wahre Deal. Es funktioniert einwandfrei auf Chrome und Firefox. Es ist sogar traurig, dass mich einige Unwissende ablehnen. Dieser Code funktioniert buchstäblich perfekt wie in allen Browsern. Sie müssen nur einen Link hinzufügen und die ID des Elements, in das Sie scrollen möchten, in die href einfügen. Dies funktioniert ohne Angabe von Angaben. Rein wiederverwendbarer und zuverlässiger Code.
quelle
Ich bin erst kürzlich auf dasselbe Problem gestoßen und habe es folgendermaßen gelöst:
Und youpi !!! Es funktioniert in allen Browsern.
Falls die Positionierung nicht korrekt ist, können Sie auf diese Weise einen Wert vom Offset () .top abziehen
quelle
Für mich war das Problem, dass Firefox automatisch mit dem Namensattribut zum Anker sprang, der dem Hash-Namen entspricht, den ich in die URL eingegeben habe. Obwohl ich .preventDefault () gesetzt habe, um das zu verhindern. Nach dem Ändern der Namensattribute sprang Firefox nicht automatisch zu den Ankern, sondern führte die Animation richtig aus.
@ Toni Sorry wenn das nicht verständlich war. Die Sache ist, dass ich die Hashes in der URL wie www.someurl.com/#hashname geändert habe. Dann hatte ich zum Beispiel einen Anker,
<a name="hashname" ...></a>
zu dem jQuery automatisch scrollen sollte. Dies war jedoch nicht der Fall, da in Firefox ohne Bildlaufanimation direkt zum Anker mit dem übereinstimmenden Namensattribut gesprungen wurde. Nachdem ich das Namensattribut in etwas anderes als den Hashnamen geändert hatte, z. B. inname="hashname-anchor"
, funktionierte das Scrollen.quelle
Für mich wurde vermieden, die ID an der Stelle der Animation anzuhängen:
Vermeiden:
Bereiten Sie die ID im Voraus vor und tun Sie dies stattdessen:
In FF behoben. (Die CSS-Ergänzungen haben für mich keinen Unterschied gemacht)
quelle
Hoffe das funktioniert.
quelle