滚动到可滚动父元素的子元素

Question

我有一个可以滚动的ul和几个li项。我的目标是当用户按下按钮时滚动到具有特定id的li项。

我有一段代码，似乎可以工作，但有两个问题：

1. 如果我在页面加载时向下滚动到列表末尾，则按钮不再起作用。请根据代码中提到的注释行取消注释并注释掉该行，以查看我的意思。
2. 如果我已经在列表中想要的项目上，如果我按滚动按钮，我希望保持在同一位置。

我猜这两个问题都是由于某些相对坐标引起的，但我无法弄清楚这个系统是如何工作的。请帮助我！

HTML:

<ul id="container">
  <li id="1">stuff1</li>
  <li id="2">stuff2</li>
  <li id="3">stuff3</li>
  <li id="4">stuff4</li>
  <li id="5">stuff5</li>
  <li id="6">stuff6</li>
  <li id="7">stuff7</li>
  <li id="8">stuff8</li>
  <li id="9">stuff9</li>
  <li id="10">stuff10</li>
  <li id="11">stuff11</li>
  <li id="12">stuff12</li>
  <li id="13">stuff13</li>
  <li id="14">stuff14</li>
  <li id="15">stuff15</li>
  <li id="16">stuff16</li>
</ul>
<button id = 'btn'>Scroll to element with id = 9</button>

JS：

var $container = $('#container')[0];

// $container.scrollTop = $container.scrollHeight;
// If I uncomment the above line, the code does not work any more
$('#btn').click(function(){
     $container.scrollTop =  $('#9').position().top;
});

CSS：

ul {
  overflow-y: auto;
  position: relative;
  height: 300px;
  width: 300px;
  background: red;
}

ul li {
  margin: 30px;
  border: solid;
}

请参见JSFiddle。

- Edgar Navasardyan

Answer 1

第9个元素将相对于滚动位置定位。您需要将当前滚动位置添加到第9个位置上，如下所示：http://jsfiddle.net/rck1ow93/2/

$container.scrollTop = $container.scrollTop+$('#9').position().top;

- Jorge Fuentes González

Answer 2

为了补充Jorge的回答，除了考虑滚动之外，您可能希望使用.offset()而不是.position()，因为它会给出正确的位置。所以更改为：

$container.scrollTop =  $('#9').position().top;

到

$container.scrollTop += $('#9').offset().top;

http://jsfiddle.net/t06fjtqd/

- dav