javascript - 通过几个按钮滚动多个div的高度

Question

我有一个具有以下结构的页面:

<div id="about" class="section">
    <div class="button">
        <img src="/images/arrow.png">
    </div>
</div>

<div id="films" class="section">
    <div class="button">
        <img src="/images/arrow.png">
    </div>
</div>

<div id="projects" class="section">
    <div class="button">
        <img src="/images/arrow.png">
    </div>
</div>

我希望当单击图像时，您将滚动到 <div> 的末尾其中<img>位于。

我已声明此代码，但它仅适用于第一张图像。

function go_to(){
    $("body,html").animate({scrollTop: $('.section').height()}, 900, "easeInOutExpo");
}

$(document).ready(function(){
      var go_to_div = $('.button img');
     $(go_to_div).click(function(event) {
        go_to() 
     });
});

如果有必要，我可以更改 HTML 结构。谢谢!!

Answer 1

因为对于 scrollTop 属性，您需要给出一个值才能转到那里。您的 $('.section').height() 代码始终给出相同的值，因此有点卡住了。试试这个吧

function go_to(section){
    var pos = section.position();
    $("body,html").animate({scrollTop: section.height() + pos.top}, 900, "easeInOutExpo");
}

$(document).ready(function(){
  $('.button img').click(function(event) {
    go_to($(this).closest(".section"));
  });
});

FIDDLE