有没有一种方法可以使滚动按钮转到单击的下一部分并遵循页面流程？

Question

我有一个页面滚动指示符，我想单击它并转到下一部分，但也有滚动按钮​​将其跟随到下一部分。仅使用jquery和CSS可以做到吗？还是需要滚动库或gsap动画库？

我可以滚动到部分ID，但工作正常，但似乎无法根据部分进行操作

html: 
 <div class="scroll-indicator__container">
    <div class="scroll-indicator scroller">
        <span class="double-arrow--right">
        <span class="chevron-1"></span><span class="chevron-2"> . 
    </span>
      </span>
    </div>
</div>

each section of page starts this way:

<!--bucket-->
<section class="bucket-section">
<!-- content -->
<div class="container container--outer hero-container">
    <div class="row justify-space-around">
        <div class="col-md-5 text--center">
            <div class="undiagnosed">
                <div class="title-row">
                    <h2 class="title">
                       title
                    </h2>
                </div>
             </div>
          </div>
       </div>
 </section>


jquery:
 $('.scroller').click(function (e) {
        e.preventDefault();
        let nextSection = $(this).closest('.bucket-section').next('.bucket-section');
        $('html, body').animate({
            scrollTop: $(nextSection).offset().top,
        }, 600);
    });