BinaryDevelop
  1. ホーム
  2. ジャバスクリプト

[解決済み] jQueryを使用して特定のアイテムにスクロールする方法は？

2022-04-02 11:28:50

質問

私は垂直スクロールバー付きの大きなテーブルを持っています。 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>

解決方法は？

至ってシンプル。 プラグイン不要 . 

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 .

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します