我有一个大表与垂直滚动条。 我想使用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>


当前回答

死很简单。不需要插件。

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

其他回答

死很简单。不需要插件。

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

我同意Kevin和其他人的观点,使用插件是没有意义的。

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

我意识到这不能解决在容器中滚动的问题,但人们发现它很有用,所以:

$('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)

滚动元素到容器的中心

将元素移到容器的中心。

在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;
}

它不是精确的中心,但在更大的元素上你不会认出它。

为了它的价值,这就是我如何设法实现这种行为的一般元素,可以在一个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();