web-dev-qa-db-ja.com

jQueryを使用して特定の項目にスクロールする方法

縦スクロールバー付きの大きなテーブルがあります。私はjQuery/Javascriptを使ってこのテーブルの特定の行にスクロールしたいと思います。

これを行うための組み込みメソッドはありますか？

ここで遊べる小さな例です。

div {
    width: 100px;
    height: 70px;
    border: 1px solid blue;
    overflow: auto;
}
<div>
    <table id="my_table">
        <tr id='row_1'><td>1</td></tr>
        <tr id='row_2'><td>2</td></tr>
        <tr id='row_3'><td>3</td></tr>
        <tr id='row_4'><td>4</td></tr>
        <tr id='row_5'><td>5</td></tr>
        <tr id='row_6'><td>6</td></tr>
        <tr id='row_7'><td>7</td></tr>
        <tr id='row_8'><td>8</td></tr>
        <tr id='row_9'><td>9</td></tr>
    </table>
</div>
javascriptjqueryscroll
238
Misha Moroshko

デッドシンプル。 プラグインは必要ありません。

var $container = $('div'),
    $scrollTo = $('#row_8');

$container.scrollTop(
    $scrollTo.offset().top - $container.offset().top + $container.scrollTop()
);

// Or you can animate the scrolling:
$container.animate({
    scrollTop: $scrollTo.offset().top - $container.offset().top + $container.scrollTop()
});​

これが 実用的な例です 。

scrollTop のドキュメント。

535
James

私はこれがコンテナ内のスクロールに答えないことを実感しますが、人々はそれがとても役に立つと感じています：

$('html,body').animate({scrollTop: some_element.offset().top});

HTMLとbodyの両方を選択するのは、ドキュメントスクローラがどちらかにある可能性があるためです。どちらを決定するのは難しいです。最近のブラウザでは$(document.body)を使えば済むでしょう。

または、ページの先頭に移動するには

$('html,body').animate({scrollTop: 0});

またはアニメーションなしで：

$(window).scrollTop(some_element.offset().top);

または...

window.scrollTo(0, some_element.offset().top); // native equivalent (x, y)
108
Dominic

私はKevinと他の人たちに同意します、これのためにプラグインを使うことは無意味です。

window.scrollTo(0, $("#element").offset().top);
27
Fredrik Stolpe

私が見つけた最高のプラグインは この要旨 でした。

それは言うごとのプラグインではありませんが、それは1つの仕事をし、そしてそれは私の問題を解決しました。残念ながら、FireFoxでしか機能しません。なぜchromeが好きではないのか、実行したくないのか、わかりません。

編集：その間私は自分でやり遂げました。プラグインは必要ありません。私の 要旨 をチェックしてください。

// Replace #fromA with your button/control and #toB with the target to which     
// You wanna scroll to. 
//
$("#fromA").click(function() {
    $("html, body").animate({ scrollTop: $("#toB").offset().top }, 1500);
});
8
lorddarq

私は常に jQueryのscrollToプラグイン がとても便利であることを発見しました。それがあなたのためであるかどうか見るためにデモで遊んでください。

3
nickf

あなたはJavaScriptでscrollIntoView()メソッドを使用することができます。 id.scrollIntoView();を与えるだけ

例えば

row_5.scrollIntoView();
3
Tamilarasi

jQueryとJavaScriptでスクロールできますJavaScriptコード

$(function() {
  // Generic selector to be used anywhere
  $(".js-scroll-to-id").click(function(e) {

    // Get the href dynamically
    var destination = $(this).attr('href');

    // Prevent href=“#” link from changing the URL hash (optional)
    e.preventDefault();

    // Animate scroll to destination
    $('html, body').animate({
      scrollTop: $(destination).offset().top
    }, 1500);
  });
});

$(function() {
  // Generic selector to be used anywhere
  $(".js-scroll-to-id").click(function(e) {

    // Get the href dynamically
    var destination = $(this).attr('href');

    // Prevent href=“#” link from changing the URL hash (optional)
    e.preventDefault();

    // Animate scroll to destination
    $('html, body').animate({
      scrollTop: $(destination).offset().top
    }, 1500);
  });
});
#pane1 {
  background: #000;
  width: 400px;
  height: 400px;
}

#pane2 {
  background: #ff0000;
  width: 400px;
  height: 400px;
}

#pane3 {
  background: #ccc;
  width: 400px;
  height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
  <li>
    <a href="#pane1" class=" js-scroll-to-id">Item 1</a>
  </li>
  <li>
    <a href="#pane2" class="js-scroll-to-id">Item 2</a>
  </li>
  <li>
    <a href="#pane3" class=" js-scroll-to-id">Item 3</a>
  </li>
</ul>
<div id="pane1"></div>
<div id="pane2"></div>
<div id="pane3"></div>
<!-- example of a fixed nav menu -->
<ul class="nav">
  <li>
    <a href="#pane3" class="js-scroll-to-id">Item 1</a>
  </li>
  <li>
    <a href="#pane2" class="js-scroll-to-id">Item 2</a>
  </li>
  <li>
    <a href="#pane1" class="js-scroll-to-id">Item 3</a>
  </li>
</ul>
1
MD Ashik

要素をコンテナの中心にスクロールする

要素をコンテナの中央に移動します。

CODEPENでのデモ

JS

function scrollToCenter() {
  var container = $('.container'),
    scrollTo = $('.5');

  container.animate({
    //scrolls to center
    scrollTop: scrollTo.offset().top - container.offset().top + scrollTo.scrollTop() - container.height() / 2
  });
}

HTML

<div class="container">
   <div class="1">
    1
  </div>
  <div class="2">
    2
  </div>
  <div class="3">
    3
  </div>
  <div class="4">
    4
  </div>
  <div class="5">
    5
  </div>
  <div class="6">
    6
  </div>
  <div class="7">
    7
  </div>
  <div class="8">
    8
  </div>
  <div class="9">
    9
  </div>
  <div class="10">
    10
  </div>


</div>
<br>
<br>
<button id="scroll" onclick="scrollToCenter()">
  Scroll
</button>

cSS

.container {
  height: 60px;
  overflow-y: scroll;
  width 60px;
  background-color: white;
}

それは中心に正確ではありませんが、あなたはより大きなより大きな要素でそれを認識することはありません。

1
basti500

JavascriptのscrollTo関数が組み込まれているので、なぜ誰もが明白に言っているのかわからない。

scrollTo( $('#element').position().top );

参照 。

1
Kevin

他の人が投稿したものを組み合わせました。そのシンプルで滑らかな

 $('#myButton').click(function(){
        $('html, body').animate({
            scrollTop: $('#scroll-to-this-element').position().top },
            1000
        );
    });
1
Nlinscott

ここのほとんどの人が提案していることとは反対に、動きをアニメートしたい場合は do プラグインを使用することをお勧めします。 scrollTopをアニメートするだけでは、スムーズなユーザーエクスペリエンスには不十分です。推論については ここで私の答え を見てください。

私は長年にわたっていくつかのプラグインを試してきましたが、最終的に自分で書いたものです。あなたはそれにスピンを与えたいかもしれません： jQuery.scrollable 。それを使うと、スクロールアクションは

$container.scrollTo( targetPosition );

しかしそれだけではありません。目標位置も固定する必要があります。あなたが他の答えで見る計算、

$target.offset().top - $container.offset().top + $container.scrollTop()

ほとんど は動作しますが、完全には正しくありません。スクロールコンテナの境界線を正しく処理しません。ターゲット要素は、境界線のサイズだけ上にスクロールされすぎています。 これがデモです

したがって、目標位置を計算するためのより良い方法は

var target = $target[0], 
    container = $container[0];

targetPosition = $container.scrollTop() + target.getBoundingClientRect().top - container.getBoundingClientRect().top - container.clientTop;

繰り返しになりますが、実際の動作を確認するには デモ をご覧ください。

ターゲット位置を返し、ウィンドウとウィンドウ以外のスクロールコンテナの両方で機能する関数には、 this Gist を自由に使用してください。そこにあるコメントは、ポジションの計算方法を説明しています。

はじめに、 animated スクロールにはプラグインを使うのが一番だと言った。ただし、トランジションなしでターゲットにジャンプしたい場合は、プラグインは必要ありません。それについては answer by @James を参照してください。ただし、コンテナーの周囲に境界線がある場合は、ターゲット位置を正しく計算するようにしてください。

1
hashchange

それが価値があるもののために、これは私が（コンテナを知らないで）スクロールでDIVの中にあることができる一般的な要素のためにそのような振る舞いを成し遂げる方法です。

ターゲット要素の高さの偽の入力を作成し、それにフォーカスを置きます。ブラウザは、スクロール可能な階層内の深さに関係なく、残りの部分に注意を払います。魅力のように働きます。

var $scrollTo = $('#someId'),
inputElem = $('<input type="text"></input>');

$scrollTo.prepend(inputElem);
inputElem.css({
  position: 'absolute',
  width: '1px',
  height: $scrollTo.height()
});
inputElem.focus();
inputElem.remove();
0
martinh_kentico

私はこの組み合わせをしました。その仕事は私のために。しかし、クリックの動きがdivのサイズが大きすぎるとシーンがこの特定のdivまでスクロールしない場合、1つの問題に直面します。

 var scrollDownTo =$("#show_question_" + nQueId).position().top;
        console.log(scrollDownTo);
        $('#slider_light_box_container').animate({
            scrollTop: scrollDownTo
            }, 1000, function(){
        });

        }
0
scode2704