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>

我有info divs嵌套在#fruitWrapper内。所有info divs的高度相等。我将#fruitWrapper的高度限制为单个info div的高度的1.5倍（宽度为页面宽度的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');
}

将div滚动到div的中心

1 个答案: