Javascript 如何在滚动页面上进行页面转换

我正在一个单页网站上工作，我希望当用户向下滚动动画播放时，他们会被带到下一个部分，比如这个网站

我在滚动功能上遇到了问题，因此您被带到页面，它不允许您继续，直到动画完成

我也有动画播放一遍又一遍，当你滚动，因为它是看到多个滚动动作

function scrolled(event) {
  var y = event.deltaY;
  var stopper = true;
  if(y>0 && stopper == true){
      stopper = false;
    $('.title').fadeOut(500);
    setTimeout(function() {
      var elmnt = document.getElementById("about");
      elmnt.scrollIntoView();
    },500);
      $('.title').fadeIn(500);
    setTimeout(function() { stopper = true;}, 2000);
  }
  if(y<0 && stopper == true){
      stopper = false;
      $('.title').fadeOut(500);
    var elmnt = document.getElementById("home");
    elmnt.scrollIntoView();
      $('.title').fadeIn(500);
        setTimeout(function() { stopper = true;}, 2000);
  }
}

函数已滚动（事件）{
var y=event.deltaY；
var=true；
如果（y>0&&stopper==true）{
stopper=false；
美元（“.title”）。淡出（500）；
setTimeout（函数（）{
var elmnt=document.getElementById（“关于”）；
elmnt.scrollIntoView（）；
},500);
美元（“.title”）.fadeIn（500）；
setTimeout（函数（）{stopper=true；}，2000）；
}
if（y0）{
如果（$（'.title:animated'））{
//不执行任何操作，因为元素正在设置动画
console.log（'test'）；
}
其他的
{
美元（“.title”）。淡出（500）；
setTimeout（函数（）{
var elmnt=document.getElementById（“关于”）；
elmnt.scrollIntoView（）；
},500);
美元（“.title”）.fadeIn（500）；
}
}
if（y不确定您的第一个问题，但这将阻止动画在彼此上方发生。调用if语句，在执行代码之前检查元素是否正在动画

window.onscroll = function (e) {  
    if($('#your-element:animated')){
        //DO NOTHING BECAUSE ELEMENT IS BEING ANIMATED
    }else{
        //DO WHAT YOU WANT BECAUSE IT'S NOT ANIMATING ANYMORE
    }  
} 

请阅读以下内容：并更新您的问题，以便我们能够为您提供所需的帮助。
window.onscroll = function (e) {  
    if($('#your-element:animated')){
        //DO NOTHING BECAUSE ELEMENT IS BEING ANIMATED
    }else{
        //DO WHAT YOU WANT BECAUSE IT'S NOT ANIMATING ANYMORE
    }  
}