javascript - scrolling a particular scrollbar of DIV element

Question

i have a div element with scrollbar, i only wants to scroll this scrollbar on some event either at Top or to Bottom

<div id="scroll_box" style="height:300px; overflow:auto;">
 <pre>
  Top
  .
  .
  .
  .
  .
  .
  .
  .
  .
  .
  Bottom
 </pre>
</div>
<button id="go_top">Top</button>
<button id="go_bottom">Bottom</button>

i dont want main scrollbar (windows) to move

i tried

$('#scroll_box').animate({scrollTop: $("#scroll_box").offset().top},"fast");
$('#scroll_box').animate({scrollBottom: $("#scroll_box").offset().bottom},"fast");

i m beginner, i first searched here then guess the code

Answer 1

您为 , 使用了不正确的值scrollTop，并且scrollBottom不存在。此外，您需要将这些语句附加到click每个按钮的事件中，否则它们都会在加载时运行并相互取消。尝试这个：

$('#go_top').click(function() {
    $('#scroll_box').animate({scrollTop: 0 },"fast");
});
$('#go_bottom').click(function() {
    $('#scroll_box').animate({scrollTop: $("#scroll_box pre").height() },"fast");
});

示例小提琴