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

用几个按钮滚动几个div的高度

1 个答案: