JS下一选项卡跳转部分
JS下一选项卡跳转部分
提问于 2019-02-28 01:03:06
我有一个简单的下一个和上一个标签在“节”之间移动。当你点击下一个选项卡时，页面向下移动，跳过下一个“部分”，转到下一个。
var $sec = $("section");
$(".prev, .next").click(function() {
var y = $sec.filter(function(i, el) {
return el.getBoundingClientRect().top > 0;
})[$(this).hasClass("next") ? "next" : "prev"]("section").offset().top;
$("html, body").stop().animate({
scrollTop: y
});
}); <div data-role="page" id="main">
<section>
<div id="home-section" class="section">
<img src="images/welcome-homepage.jpg" />
</div>
</section>
<section>
<div id="about-section" class="section">
<img src="images/about-us.jpg" />
</div>
</section>
<section>
<div id="service-charter-section" class="section">
<img src="images/service-charter.jpg" />
</div>
</section>
<section>
<div id="testionials-section" class="section">
<img src="images/about-us.jpg" />
</div>
</section>
</div>回答 1
Stack Overflow用户
回答已采纳
发布于 2019-03-01 04:33:34
这应该是可行的。它只是生成一个包含所有部分位置的数组，并在单击上一步/下一步时跳过该位置。
jQuery(document).ready(function($) {
var sectionPosition = 0;
var scrollPositions = []
function scroll(y) {
$('html').stop().animate({
scrollTop: y
});
}
$("section").each(function(i, el) {
scrollPositions.push(parseInt($(el).offset()['top']))
})
$(".prev, .next").click(function() {
if ($(this).hasClass('next')) {
scroll(scrollPositions[sectionPosition + 1]);
if (sectionPosition < scrollPositions.length) {
sectionPosition++;
}
} else if (sectionPosition > 0) {
scroll(scrollPositions[sectionPosition - 1]);
sectionPosition--;
}
});
});
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54910814
复制相关文章
相似问题