Question

有人可以帮忙吗？

我似乎有两个问题：

页面不滚动
当触发滚动点击3x时，.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++;
                });
              });
            });

Answer 1

几个小时后，我试图找出<scrollTop>无法正常工作的原因，我发现<body>标记的css样式为<height:100%;>，这使<offset>混乱1}}。亚历克斯谢谢你的帮助。对于其他人来说，这是一个有效的JSFiddle Link

JQuery滚动到下一部分

1 个答案: