Javascript 使用$（窗口）。滚动功能跳转到页面上的div

我试图模仿这个网站的功能 当你在那个页面上向下滚动时，它会跳到下一个“屏幕”，如果你向上滚动，它会跳回到上一个

我的JS在这里：

var currentDiv = "Home";
var latestScroll = 0;
var scrollable = true;
    $(document).ready(function(){
        $("#HomeLink").addClass("activeNav");
        $(".navLink").click(function(){
            $(".navLink").removeClass("activeNav");
            $(this).addClass("activeNav");
            var divID = $(this).attr("data-linkID");
            scrollTo(divID);
        });
        $(window).scroll(function(){
            console.log(scrollable);
            if (scrollable==true){
                var currentScroll = $(window).scrollTop();
                if (currentScroll > latestScroll){
                    scrollable = false;
                    //downscroll
                    if(currentDiv!="About"){
                        var nextDiv = $("#"+currentDiv).next()[0];
                        var nextDivID = $(nextDiv).attr("id");
                        scrollTo(nextDivID);
                    }
                }else{
                    scrollable = false;
                    //upscroll
                    if(currentDiv!="Home"){
                        var prevDiv = $("#"+currentDiv).prev()[0];
                        var prevDivID = $(prevDiv).attr("id");
                        scrollTo(prevDivID);
                    }
                }
            }
        });
    });

    function scrollTo(divID){
        currentDiv = divID;
        var target = $("#"+divID);
        $('html,body').animate({
             scrollTop: target.offset().top
        }, 500);
        setTimeout(function() {
            // Do something after 2 seconds
            latestScroll = target.offset().top;
            scrollable = true;
        }, 2000);
    }

我的问题是，一旦它开始滚动，它就会跳到下一个屏幕，但当jQuery动画运行时，它会注册更多的滚动，然后继续跳。我尝试过添加布尔滚动，甚至在将其设置回true时添加一个超时，但它仍然会跳转至少两次

HTML:

<div id="screens">
    <div class="screen" id="Home">
        <div id="logo">ZEPPA</div>
    </div>
    <div class="screen" id="Video">
        <iframe width="100%" height="100%" src="http://www.youtube.com/embed/XGSy3_Czz8k"></iframe>
    </div>
    <div class="screen" id="Info">INFO</div>
    <div class="screen" id="About">ABOUT US</div>
</div>

泽帕
信息
关于我们

有人知道如何解决这个问题吗？我似乎找不到办法让它只注册一次滚动，然后很好地重置自己

---

我这里有一个难题：

我建议您使用一个经过测试的插件，比如，而不是试图重新发明轮子

当你开始担心触摸屏电脑、移动电话、动态滚动（用于苹果笔记本电脑）、转换性能、与旧浏览器的回退兼容性、键盘可访问性、每个部分URL的更改、返回用户的有用URL或特定链接等时，事情会变得更加复杂

---

使用经过测试的脚本将使事情变得更容易，并将为您省去许多麻烦

看起来很好，我稍后再试一试！我非常愿意使用一个插件，我只是找不到一个合适的