jQuery滚动到下一部分 [英] JQuery Scroll to Next Section
本文介绍了jQuery滚动到下一部分的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
有人可以帮忙吗?
我似乎有两个问题:
- 页面无法滚动,并且
- 当触发器滚动单击3次时,.top未定义.
.hero-banner
是全屏幻灯片.单击.trigger-scroll
时,页面需要滚动到sections.scroll-here.到达最后一个部分时,需要滚动到顶部.
.hero-banner
is a full screen slideshow. When .trigger-scroll
is clicked, page needs to scroll to sections.scroll-here. When reached last section needs to scroll to top.
预先感谢您的回答.
HTML:
<section class="hero-banner">full screen section</section>
<div class="trigger-scroll"></div>
<section class="scroll-here" id="first-section">some content</section>
<section class="scroll-here" id="second-section">some content</section>
<section class="scroll-here" id="third-section">some content</section>
JS:
$(document).ready(function() {
$('.page-scroller', function() {
var $scrollSection = $('.scroll-here')
var $scrollTrigger = $('.trigger-scroll')
var nextSection = 0;
$scrollTrigger.on( 'click', function() {
$(this).removeClass('go-to-top');
// If at last section, scroll back to top on next click:
if (nextSection >= $scrollSection.length) {
$('html, body').animate({ scrollTop: 0 }, 1000);
nextSection = 0;
return;
}
// If you've already scrolled down and then click button, run a check
// to find next section position so you don't go backwards:
while ( $('body').scrollTop() > $($scrollSection[nextSection]).offset().top ) {
nextSection++;
}
// If next section is the last, add class to rotate arrow graphic:
if (nextSection === ($scrollSection.length - 1)) {
$(this).addClass('go-to-top');
}
// Move to next section and increment counter check:
$( 'html, body' ).animate({ scrollTop: $($scrollSection[nextSection]).offset().top }, 1000);
nextSection++;
});
});
});
推荐答案
几个小时后,试图弄清为什么<scrollTop>
无效的原因,我发现<body>
标记的css样式为<height:100%;>
弄乱了<offset>
.亚历克斯感谢您的帮助.对于其他人,这是一个有效的 JSFiddle链接
After a few hours trying to figure out why <scrollTop>
wasn't working, I found that <body>
tag had a css style of <height:100%;>
which was messing up the <offset>
. Alex thanks for your help. For others, here is a working JSFiddle Link
这篇关于jQuery滚动到下一部分的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文