2
私はスクロール可能なulといくつかのli -itemを持っています。私の目標は、ユーザがボタンを押したときに特定のidを持つli -itemにスクロールすることです。スクロール可能な親の子要素へのスクロール
私が働くようで、コードを持っているが、二つの問題
- は、私はページが読み込まれると、リストの最後までスクロールダウンした場合、ボタンはもう動作しませんがあります。コメントとコードのコメントを解除して、私が何を意味するのかを確認してください。
- 私が既にリスト内の希望のアイテムにいる場合は、スクロールボタンを押しても同じ場所にいたいです。
どちらの問題も相対座標であると思いますが、このシステムの仕組みを理解できません。お願い助けて！
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;
}