顯示/隱藏定位點上的溢出div

Question

我試圖讓div顯示（如果不是已經可見的話）並滾動到特定的錨點。我發現這個答案，並嘗試使用它，但它看起來像它不能很好地工作......

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

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

正如你所看到的，當你點擊按鈕，它滾動到錨點，但如果再次單擊，則滾動到其他位置......如果繼續單擊該按鈕，我想使它保持在當前錨點上。

你能幫我找到我做錯了嗎？

$('#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平滑度