JQuery 滚动到下一节答案

【问题标题】：JQuery Scroll to Next SectionJQuery 滚动到下一节
【发布时间】：2014-08-22 09:45:29
【问题描述】：

有人可以帮忙吗？

我似乎有两个问题：

页面没有滚动并且
当触发器滚动点击 3 次时，.top 未定义。

.hero-banner 是全屏幻灯片。点击.trigger-scroll时，页面需要滚动到sections.scroll-here。到达最后一部分时需要滚动到顶部。

提前感谢您的回答。

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++;
                });
              });
            });

【问题讨论】：

标签： javascript jquery html scroll

【解决方案1】：

在尝试找出<scrollTop> 不起作用的几个小时后，我发现<body> 标签的css 样式为<height:100%;>，这弄乱了<offset>。亚历克斯感谢您的帮助。对于其他人，这是一个有效的JSFiddle Link

【讨论】：