javascript - 在 anchor 上显示/ overflow hidden div

Question

我试图让一个 div 出现(如果还不可见)并滚动到特定的 anchor 。我找到了这个答案并尝试使用它，但它看起来效果不佳......

https://stackoverflow.com/a/7513110/3703099

我的代码:http://jsfiddle.net/0sq2rfcx/9/

如您所见，当您单击按钮时，它会滚动到 anchor ，但如果您再次单击，它会滚动到另一个位置...如果您继续单击，我想让它停留在当前 anchor 上按钮。

你能帮我找出我做错了什么吗？

$('#b1').click(function() {
  $('#result').show();
  $('#result').scrollTop($('#a1').offset().top);
});
$('#b2').click(function() {
  $('#result').show();
  $('#result').scrollTop($('#a2').offset().top);
});
$('#b3').click(function() {
  $('#result').show();
  $('#result').scrollTop($('#a3').offset().top);
});

#result {
  display: none;
  height: 200px;
  overflow-y: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id='b1'>b1</button>
<button id='b2'>b2</button>
<button id='b3'>b3</button>
<button onclick="$('#result').hide();">hide</button>
<div id='result'>
  <p>bla 0</p>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <p id='a1'>bla 1</p>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <p id='a2'>bla 2</p>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <p id='a3'>bla 3</p>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
</div>

Answer 1

我刚刚更新了您的 jsfiddle: http://jsfiddle.net/0sq2rfcx/8/

This should work on all browsers included IE7

$('#b1').click(function () {
$('#result').show();
$("#result").animate({ scrollTop:$('#a1').parent().scrollTop() + $('#a1').offset().top - $('#a1').parent().offset().top}, "slow");
});
$('#b2').click(function () {
    $('#result').show();
    $("#result").animate({ scrollTop:$('#a2').parent().scrollTop() + $('#a2').offset().top - $('#a2').parent().offset().top}, "slow");
});
$('#b3').click(function () {
    $('#result').show();
    $("#result").animate({ scrollTop:$('#a3').parent().scrollTop() + $('#a3').offset().top -     $('#a3').parent().offset().top}, "slow");