Javascript 在用户滚动上显示下一个id和动画

首先，我使用一个库来设置从#1到#2的动画，代码如下：

$(function() {
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

我的html是：

<div id="indicators">

    <a href="#one" class="btn page-scroll" style="border-radius: 50%;"><i class="fa fa-circle" aria-hidden="true"></i>
</a>
    <a href="#two" class="btn page-scroll"><i class="fa fa-circle" aria-hidden="true"></i>
</a>
    <a href="#three" class="btn page-scroll"><i class="fa fa-circle" aria-hidden="true"></i>
</a>
    </div>

$(document).ready(function(){
    $(body).scroll(function(){

//if user is on #one on scroll go to the #two with animation
    });
});