Javascript scrollTop（）和幻灯片式动画

我试图让一个页面像幻灯片一样，每个部分都以幻灯片的形式出现。HTML由4个节元素组成，每个节元素分别标识为about、about、2等等。我使用jQuery使它们在加载时占据窗口高度。在向下滚动时，我激活了从一张幻灯片切换到另一张幻灯片的功能

它在第一张幻灯片上运行良好，但随后被卡住。如果我重新加载页面并在那个位置重新加载，它会一直工作到下一张幻灯片，在那里它会再次卡住

查看该值，我可以看到有条件激活下一个动画（例如，动画设置为#about3），但它拒绝移动（滚动时始终动画设置为#about2）

我做错什么了吗

function scrollDown(){
    $height = window.innerHeight;
    $scroll = $(window).scrollTop();
    console.log($scroll+' and '+$height);
    if ( $scroll > 0 && $scroll < $height) {
        $('html, body').animate({scrollTop: $("#about2").offset().top}, 1000);    
    } else if ($scroll > $height && $scroll < 2*$height) {
        $('html, body').animate({scrollTop: $("#about3").offset().top}, 1000);    
    } else if ($scroll > 2*$height && $scroll < 3*$height) {
        $('html, body').animate({scrollTop: $("#about4").offset().top}, 1000);    
    }
}

函数向下滚动（）{
$height=window.innerHeight；
$scroll=$（窗口）.scrollTop（）；
log（$scroll+'和'+$height）；
如果（$scroll>0&&$scroll<$height）{
$（'html，body'）.animate（{scrollTop:$（“#about2”）.offset（）.top}，1000）；
}else if（$scroll>$height&$scroll<2*$height）{
$（'html，body'）.animate（{scrollTop:$（“#about3”）.offset（）.top}，1000）；
}否则如果（$scroll>2*$height&&$scroll<3*$height）{
$（'html，body'）.animate（{scrollTop:$（“#about4”）.offset（）.top}，1000）；
}
}

---

这是我的代码的一个JSFIDLE:

您很接近，但只遗漏了一件事。由于调用scrollDown函数的次数太多，它似乎无法进入下一节。您创建了一个事件，以便在每次滚动发生时触发，然后告诉窗口进行更多滚动，这将触发更多滚动事件，从而创建一个长链。本质上，一大堆动画请求都在排队。最后，如果你让页面停留足够长的时间，它会向下滚动到about3部分

我添加了一个布尔值来跟踪窗口何时滚动，并将其添加到逻辑检查中。这有助于防止过多的动画调用：]当满足窗口滚动到特定部分的条件时，布尔值“isScrolling”设置为true。动画完成后，该布尔值将重置回false，并可以进行另一个滚动动画

var isScrolling = false;

function scrollDown(){
    $height = window.innerHeight;
    $scroll = $(window).scrollTop();
    console.log($scroll+' and '+$height);
    if ( $scroll > 0 && $scroll < $height && isScrolling === false) {
            console.log('about1');
            isScrolling = true;
            $('html, body').animate({
                scrollTop: $("#about2").offset().top
            }, 1000, function(){ isScrolling = false; }
        );    
    } else if ($scroll > $height && $scroll < $height * 2 && isScrolling === false) {
            console.log('about2');
            isScrolling = true;
            $('html, body').animate({
                            scrollTop: $("#about3").offset().top
                            }, 1000, 
            function(){ isScrolling = false; }
         );    
    } else if ($scroll > 2*$height && $scroll < $height * 3 && isScrolling === false) {
            console.log('about3');
            isScrolling = true;
            $('html, body').animate({
                scrollTop: $("#about4").offset().top
                }, 1000,
                function(){ isScrolling = false; }
        );    
    }
}

var isScrolling=false；
函数scrollDown（）{
$height=window.innerHeight；
$scroll=$（窗口）.scrollTop（）；
log（$scroll+'和'+$height）；
如果（$scroll>0&&$scroll<$height&&iscrolling===false）{
console.log（'about1'）；
isScrolling=true；
$（'html，body'）。设置动画({
scrollTop:$（“#about2”）.offset（）.top
}，1000，函数（）{isScrolling=false；}
);    
}否则如果（$scroll>$height&&$scroll<$height*2&&isScrolling===false）{
console.log（'about2'）；
isScrolling=true；
$（'html，body'）。设置动画({
scrollTop:$（“#about3”）.offset（）.top
}, 1000, 
函数（）{isScrolling=false；}
);    
}否则如果（$scroll>2*$height&&$scroll<$height*3&&isScrolling==false）{
console.log（'about3'）；
isScrolling=true；
$（'html，body'）。设置动画({
scrollTop:$（“#about4”）.offset（）.top
}, 1000,
函数（）{isScrolling=false；}
);    
}
}

---

另外，请注意，我必须在CSS中添加一个小的调整，以将主体上的边距设置为0。这导致了比较中的问题，并会使页面认为它比实际向下滚动得更远，从而在整个页面中开始向下滚动到下一节。只要滚动一次，就会产生连锁反应，一次就可以滚动整个网站。要看到这一点，只需删除边距：0；在这个的body标签上。

jsfiddle会很有帮助的好主意@phenxd，我刚刚添加了它为什么不使用fullpage.js插件？它易于设置、跨浏览器以及响应不同的设备。你可以在这里找到它的魅力！我想我应该先看看插件，谢谢你的解释！由于时间限制，我选择了Fullpage插件，但我现在更了解scroll（）的工作方式。下次我必须编写类似的函数时，我会记住这一点。