Question

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

我有一个似乎有效的代码，但有两个问题

如果我在页面加载时向下滚动到列表的末尾，则该按钮不再起作用。注释并取消注释代码中提到的行以查看我的意思
如果我已经在列表中的所需项目上，如果按下滚动按钮，我想留在同一个地方。

我想，这两个问题都是因为一些相对坐标，但我无法弄清楚这个系统是如何工作的。请帮帮我！

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

Answer 1

9元素也将相对于滚动定位。您必须将当前滚动追加到9位置，如下所示：http://jsfiddle.net/rck1ow93/2/

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

Answer 2

要添加Jorge的答案，除了将滚动记入帐户外，您可能还想使用.offset（）而不是.position（），因为它会为您提供正确的位置。所以改变

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

到

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

http://jsfiddle.net/t06fjtqd/

滚动到可滚动父级

2 个答案: