Question

我正在尝试使div显示（如果尚未显示）并滚动到特定锚点。我找到了这个答案并尝试使用它，但它看起来效果不好......

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

正如您所看到的，当您单击按钮时，它会滚动到锚点，但是如果您再次单击，它会滚动到另一个位置...如果您一直单击，我希望它保持在当前锚点上按钮。

你能帮我找一下我做错了吗？

$('#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");

Answer 2

您可以使用位置代替scroll，如下所示：

<强> DEMO HERE

$('#b1').click(function () {
    $('#result').show();
    $('#result').animate({
        'scrollTop' : $("#a1").position().top-10 //-10 here is just to set it in view!!
    });
});

为平滑性添加了animation

显示/隐藏锚点上的溢出div

2 个答案: