web-dev-qa-db-de.com

Wie blättern Sie zu einem Element in jQuery

Ich habe den folgenden Code in JavaScript erstellt, um den Fokus auf das jeweilige Element zu legen (branch1 ist ein Element).

document.location.href="#branch1";

Da ich jedoch auch jQuery in meiner Web-App verwende, möchte ich den obigen Code in jQuery verwenden. Ich habe es versucht, weiß aber nicht, warum es nicht funktioniert.

$("#branch1").focus();

Der obige Code für jquery (focus ()) funktioniert nicht für div, wohingegen ich den gleichen Code mit Textfeld versuche

Bitte sagen Sie mir, wie kann ich mich mit jQuery auf ein Div-Element konzentrieren?

Vielen Dank!

67
Prashant

Überprüfen Sie jQuery.ScrollTo , ich denke, das ist das Verhalten, das Sie möchten, überprüfen Sie die demo .

32
CMS

Für mein Problem, dass dieser Code funktioniert hat, musste ich beim Laden der Seite zu einem Ankertag navigieren:

$(window).scrollTop($('a#captchaAnchor').position().top);

In diesem Zusammenhang können Sie dies für jedes Element verwenden, nicht nur für ein Ankertag.

108
Banning

Wie @ user293153 habe ich diese Frage gerade erst entdeckt und schien nicht richtig beantwortet zu werden.

Seine Antwort war am besten. Sie können aber auch das Element animieren.

$('html, body').animate({ scrollTop: $("#some_element").offset().top }, 500);
48
User123342234

Sie können die jQuery-Funktionen folgendermaßen erweitern:

jQuery.fn.extend({
scrollToMe: function () {
    var x = jQuery(this).offset().top - 100;
    jQuery('html,body').animate({scrollTop: x}, 500);
}});

und dann:

$('...').scrollToMe();

einfach ;-)

37
MCurbelo

Check out jquery-scrollintoview .

ScrollTo ist in Ordnung, aber oft möchten Sie nur sicherstellen, dass ein Oberflächenelement sichtbar ist und nicht unbedingt oben. ScrollTo hilft dir dabei nicht. Aus dem README von scrollintoview:

Wie löst dieses Plugin das Problem mit der Benutzererfahrung?

Dieses Plugin rollt ein bestimmtes Element in eine Ansicht ähnlich dem Browser integrierte Funktionalität (DOMs Funktion scrollIntoView ()), funktioniert jedoch anders (und sicherlich benutzerfreundlicher):

  • es wird nur zu einem Element gescrollt, wenn das Element tatsächlich nicht sichtbar ist Wenn das Element in der Ansicht ist (irgendwo im sichtbaren Dokumentbereich), kein Bildlauf wird aufgeführt;
  • es scrollt mit Animationseffekten; Wenn ein Bildlauf durchgeführt wird, wissen die Benutzer genau, dass sie nirgendwo umgeleitet werden, aber tatsächlich .__ sehen. dass sie einfach innerhalb der gleichen Seite an einen anderen Ort verschoben werden (ebenso wie in welche Richtung sie verschoben wurden);
  • es wird immer die geringste Menge Bildlauf angewendet. Wenn sich das Element über dem sichtbaren Dokumentbereich befindet, wird es zur .__ gescrollt. Oberseite des sichtbaren Bereichs; Wenn sich das Element unterhalb des Sichtbaren befindet, wird es .__ sein. bis zum unteren Rand des sichtbaren Bereichs gescrollt werden; Dies ist das konsistenteste Art des Bildlaufs - wenn Bildlauf immer oben sein sollte, dann manchmal Ein Element konnte nicht nach oben gescrollt werden, wenn es sich am unteren Rand von .__ befand. scrollbarer Container (daher wäre das Scrollen nicht vorhersagbar);
  • wenn die Größe des Elements die Größe des sichtbaren Dokumentbereichs überschreitet, wird in der oberen linken Ecke die Bildlauffläche angezeigt.
4
Jonathan Tran

Benutzen 

$ (Fenster) .scrollTop ()

Es wird das Fenster zum Objekt scrollen.

 var scrollPos =  $("#branch1").offset().top;
 $(window).scrollTop(scrollPos);
2
Nishad Up

Ich denke, Sie suchen möglicherweise nach einem "Anker", wenn Sie ein Beispiel haben.

<a href="#jump">This link will jump to the anchor named jump</a>
<a name="jump">This is where the link will jump to</a>

Die jQuery-Methode von focus unterscheidet sich von dem, was Sie erreichen möchten.

1
Luca Matteis

Damit die focus () - Funktion an dem Element arbeiten kann, muss das div ein tabindex-Attribut haben. Dies wird wahrscheinlich nicht standardmäßig für diesen Elementtyp durchgeführt, da es sich nicht um ein Eingabefeld handelt. Sie können beispielsweise bei -1 einen Tabindex hinzufügen, um zu verhindern, dass Benutzer, die Tab verwenden, sich darauf konzentrieren. Wenn Sie einen positiven Tabindex verwenden, können Benutzer den Tab verwenden, um sich auf das div-Element zu konzentrieren.

Hier ein Beispiel: http://jsfiddle.net/klodder/gFPQL/

Tabindex wird in Safari jedoch nicht unterstützt.

0
Klodder