如何使用jQuery滚动到特定的项目?

我有一个大表与垂直滚动条。我想使用jQuery/JavaScript滚动到这个表中的特定行。

是否有内置的方法来做到这一点?

Here is a little example to play with. 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>

当前回答

我结合了其他人发布的内容。它简单流畅

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

2014-05-05 00:17:13

其他回答

你可以使用jQuery scrollTo插件插件:

$('div').scrollTo('#row_8');

2010-05-25 15:07:16

死很简单。不需要插件。

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的文档。

2010-05-25 15:20:15

我结合了其他人发布的内容。它简单流畅

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

2014-05-05 00:17:13

我自己设法做到了。不需要任何插件。看看我的要点:

// 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);
});

2012-10-07 19:14:21

你可以在javascript中使用scrollIntoView()方法。只需要给id.scrollIntoView();

例如

row_5.scrollIntoView();

2016-02-17 09:21:50

如何使用jQuery滚动到特定的项目?

推荐文章

最新文章

标签