web-dev-qa-db-ja.com

jQueryの要素にスクロールする方法は？

JavaScriptで次のコードを実行して、特定の要素（branch1は要素）に焦点を当てています。

document.location.href="#branch1";

しかし、私は自分のWebアプリでもjQueryを使用しているので、jQueryで上記のコードを実行したいと思います。試しましたが、なぜ機能しないのかわかりません。

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

上記のjquery（focus（））コードはdivでは機能しませんが、テキストボックスで同じコードを試している場合、その機能は、

JQueryを使用してdiv要素に焦点を当てるにはどうすればよいですか？

ありがとう！

javascriptjqueryhtmlfocus
67
Prashant

jQuery.ScrollTo を確認します。これがあなたの望む動作だと思います。 demo を確認してください。

32
CMS

このコードで問題が発生したため、ページの読み込み時にアンカータグに移動する必要がありました。

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

さらに、アンカータグだけでなく、任意の要素でこれを使用できます。

109
Banning

@ user293153のように、私はこの質問を発見したばかりで、正しく答えられなかったようです。

彼の答えは最高でした。ただし、要素をアニメーション化することもできます。

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

次のようにjQuery機能を拡張できます。

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

その後：

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

簡単;-)

37
MCurbelo

チェックアウト jquery-scrollintoview 。

ScrollToは問題ありませんが、多くの場合、必ずしも最上部にあるとは限らず、UI要素が表示されるようにするだけです。 ScrollToはこれには役立ちません。 scrollintoviewのREADMEから：

このプラグインはユーザーエクスペリエンスの問題をどのように解決しますか

このプラグインは、ブラウザの組み込み機能（DOMのscrollIntoView（）関数）に似たビューに特定の要素をスクロールしますが、動作が異なります（そして、おそらくよりユーザーフレンドリーです）。

  • 要素が実際に見えなくなったときにのみ要素にスクロールします。要素が表示されている場合（表示されているドキュメント領域の任意の場所）、スクロールは実行されません。
  • アニメーション効果を使用してスクロールします。スクロールが実行されると、ユーザーはどこにもリダイレクトされないことが正確にわかりますが、実際には同じページ内の他の場所に移動していることがわかります（移動した方向も）。
  • 適用されるスクロールの量は常に最小です。要素が可視ドキュメント領域の上にある場合、可視領域の上部までスクロールされます。要素が可視領域の下にある場合、可視領域の下部までスクロールされます。これは最も一貫したスクロール方法です-スクロールが常に上にある場合、スクロール可能なコンテナの下部に近い要素を上にスクロールできないことがありました（したがって、スクロールは予測できません）。
  • 要素のサイズが表示可能なドキュメント領域のサイズを超える場合、その左上隅がスクロールされるものになります。
4
Jonathan Tran

つかいます

$（window）.scrollTop（）

ウィンドウをアイテムにスクロールします。

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

あなたが持っている例を考えると、あなたは「アンカー」を探しているかもしれないと思います。

<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>

フォーカスjQueryメソッドは、達成しようとしていることとは異なることを行います。

1
Luca Matteis

要素でfocus（）関数が機能するには、divにtabindex属性が必要です。このタイプの要素は入力フィールドではないため、デフォルトではおそらくこれは行われません。たとえば-1にtabindexを追加して、tabを使用してユーザーがそれに集中するのを防ぐことができます。正のtabindexを使用すると、ユーザーはdiv要素にフォーカスするためにタブを使用できます。

例： http://jsfiddle.net/klodder/gFPQL/

ただし、tabindexはSafariではサポートされていません。

0
Klodder