Wie kann ich das Browser-Ansichtsfenster an den oberen Rand der Seite bewegen, wenn der Benutzer auf eine jQueryUI-Optionsschaltfläche klickt?

Ich bin kürzlich auf dieses Problem gestoßen und habe tatsächlich eine Lösung gefunden, die Ihnen in Abhängigkeit von Ihrem CSS helfen kann.

Grundsätzlich, wenn Sie Ihre Radioknöpfe von der Seite mit etwas wie verstecken:

Oder etwas ähnliches ist das top : -10000px ; , das das Problem ist.

Das heißt, wenn der Radioknopf durch den Label-Klick zwangsläufig fokussiert wird, versucht die Seite, ihn durch Scrollen des Browser-Viewports in den Radiobutton in Sicht zu bringen. Da der minimale scrollTop-Wert für den Browser 0 ist, scrollt er nach oben.

Wenn Sie nur die Regel top : -10000px ; entfernen, wird das Problem behoben.

Hoffe, das hilft.

ps. Der Grund, warum preventDefault und stopPropagation in dieser Instanz nicht funktionieren, wie in anderen Kommentaren erwähnt, ist, dass sie das Standardverhalten des Browsers nicht anhalten, um das Formularfeld zu fokussieren, wenn auf das Label geklickt wird.

Ich habe versucht, das Problem neu zu erstellen, aber es ist fehlgeschlagen. Ich habe das in FireFox 3.6.13, Google Chrome 8.0 und Internet Explorer 8 überprüft.

Können Sie weitere Einzelheiten angeben, um das Problem neu zu erstellen, oder eine Test-HTML-Seite sein?

Haben Sie ein Klickereignis für die Optionsfelder? Wenn Sie einen auf Ihrem Ereignishandler haben, können Sie die Verbreitung des Ereignisses stoppen und es einmal versuchen.

Aber welcher Code auch immer hier gegeben wird, deutet nichts an, was zu diesem Verhalten führen könnte. Wenn Sie eine Testseite haben, aktualisieren Sie bitte den Beitrag mit diesem.

Verwenden Sie anstelle von href="#" href="# add" oder einen anderen relevanten Text. Dies wird den Sprung an den Anfang der Seite lösen.

sieht so aus, als müssten Sie mit einem Klick umgehen und setzen Sie return false; am Ende des Handlers. Oder es kann besser sein, das Sprudeln des Ereignisses zu verhindern, indem Sie Folgendes verwenden:

wobei ev - ein Ereignisobjekt ist

Der folgende Click-Handler würde dies verhindern

Ich hatte das gleiche Problem

Nur-FF-Schnellkorrektur (bezogen auf Ihren Code) wäre

Lösung für FF und IE

Der Täter war eine CSS-Regel im Hauptstil:

, die im Konflikt mit jQueryUI .ui-helper-hidden-accessible class

Ich musste diese Regel spezifischer machen und sie nur auf die "echten" Formulare beschränken, die für die Datenübermittlung verwendet werden.

Ich habe Fälle gefunden, in denen die Verwendung der leeren Ankerverknüpfung href="#" solche Ansichtsfenstersprünge verursachen würde (besonders wenn sie in einem iframe in chrome verwendet werden). Versuchen Sie, es durch href="javascript: void (0)"

Dies ist nicht das Verhalten der Benutzeroberfläche von jquery, wie es in Ссылка

Es ist am wahrscheinlichsten , ein anderer Code, den Sie diesen Schaltflächen hinzufügen.

Was passiert, wenn Sie auf diese Optionsfelder klicken? Sie verstecken oder laden Inhalt oder etwas anderes?

Wenn Sie an diese Optionsfelder einen anderen Handler anschließen, zeigen Sie diesen Code bitte an, da dies sehr wohl der Täter sein könnte.

Verwenden Sie

top: auto;

Gefunden in einem Wordpress-Fehlerbericht: Ссылка Die Idee ist, dass sowohl "links" als auch "oben" gesetzt werden "zu großen Negativen sollte nicht notwendig sein.

Hinweis für die Kommentatoren, die den Click-Handler oder die href: jquery-ui behandeln, legen die Handler für ihre Zwecke fest, also würde ich sie lieber nicht ändern und dann Accessibility, Tastaturnav usw. testen. Die Style Override-Lösung scheint harmlos zu sein .

[Bearbeiten 2014/02/03] Wordpress hat das in Version 3.8.1 (oder früher) behoben. Dieser Fix ist ein bisschen cool, negative Positionierung begone! Es wird durch clip: rect(0 0 0 0); border: 0; ersetzt, was offensichtlich der jquery-ui Weg ist. Siehe Ссылка

Dieses Ding ist immer noch absolut positioniert, also sollte es in Ordnung sein, in meine oder Christos Lösung zu gehen.