我有一个具有以下结构的页面:
<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 结构。谢谢!!
最佳答案
因为对于 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"));
});
});
关于javascript - 通过几个按钮滚动多个div的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34559903/