javascript - 将 div 滚动到 div 的中心

Question

这是我的 div 结构的模型。

<div id="fruitWrapper">
  <div id="lychee">LYCHEE</div> //info div 1
  <div id="mango">MANGO</div> //info div 2
  <div id="apple">APPLE</div> //info div 3
  <div id="papaya">PAPAYA</div> //info div 4
  <div id="pineapple">PINEAPPLE</div> //info div 5
</div>

我在 #fruitWrapper 中嵌套了大约 75 个 info div。所有 info div 的高度都相等。我已将 #fruitWrapper 的高度限制为单个 info div 高度的 1½ 倍(宽度为页面宽度的 100%)。

.info_div{
  display: inline-block;
}

我在页面上有 75 个图标。如何让特定的 info div 滚动到 #fruitWrapper 的中心？

showInfo(papaya);
function showInfo(fruit) {
      $('#fruitWrapper').scrollTop($('#fruitWrapper').scrollTop() + $('#'+fruit).position().top - $('#fruitWrapper').height()/2 + $('#'+fruit).height()/2);
});

Answer 1

你的意思是这样的？ http://jsfiddle.net/0vp7gwe3/

showInfo('papaya');

function showInfo(fruit) {
    console.log($('#' + fruit));
    $('#fruitWrapper').animate({
        scrollTop: $("#" + fruit).offset().top
    }, 'slow');
}