我有一个像这样的页面模板:
<div class="page-wrapper">
<header class="header-5">
<div class="container">
content
</div>
<div class="background"></div>
</header>
<section class="content-3">
<div class="row">
<div class="col-sm-8 col-sm-offset-2 text-center">
content
<a class="control-btn" href="#"> </a>
</div>
</div>
<div class="container">
点击<a class="control-btn" href="#"> </a>
后,我希望它滚动到上一个<div class="container">
(代码段中的最后一行)。
使用这个jQuery,它会滚动到第一个div.container
(朝向代码段的顶部):
$('.control-btn').on('click', function() {
$.scrollTo($(".container"), {
axis : 'y',
duration : 500
});
return false;
});
如何让它滚动到下一个 div.container
(我的代码示例中的最后一个)?
注意:还有其他div.container
元素向下 - 这不是&#34; last&#34;一页在页面上。
答案 0 :(得分:6)
$('.control-btn').on('click', function () {
var ele = $(this).closest("section").find(".container");
// this will search within the section
$("html, body").animate({
scrollTop: $(ele).offset().top
}, 100);
return false;
});
<强> DEMO 强>