自動スクロールセクションのWebサイト

Question

セクションを自動スクロールしようとしていますが、これはs1とs3でのみ機能します。どのようにコードが動作するはずだと思いますが、s3はs2にジャンプしますが、代わりにs1にジャンプします。車輪の出来事が拾われる、私はalert（）でチェックした。他のコード行はすべて実行されます。おそらくレイアウトのためにscrollTopが機能しないのですが、私は問題を見つけることができません。私は手がかりをいただければ幸いです。ありがとうございました！

<div class="header" id="main"> 
    <div class="menu.container" > 
     <span style="font-size:30px;cursor:pointer;margin-right: 2vh;color: 
whitesmoke;" onclick="openOffcanvas();openNav3()">&#9776; </span>   
    </div> 
</div> 

<div class="therest" > 
    <div id="myCanvasNav" class="overlay3" onclick="closeOffcanvas()" 
style="width: 0%; opacity: 0;"></div> 
    <section id="s1" class="section"> 
     <div class="content"> 
      <h1>CompanyX Goes All in With React Native</h1> 
      <h2>Starting in 2018, CompanyX Engine will support React Native. 
</h2> 
      <img src="5.jpg" /> 

     </div>  
    </section> 
    <section id="s2"> 
     <div class="content"> 

     </div> 
    </section> 
    <section id="s3" style="background-color: aqua"> 
     <div class="content"> 

     </div> 
    </section> 


</div> 
<script id="jsbin-javascript"> 
var headerHight = $("main").height(); 
var doWheel = true;  
document.getElementById("s1").addEventListener('wheel', function(e) { 
    e.preventDefault(); 

    if(!doWheel) return; 
    doWheel = false; 

    $('div.therest').animate({ 
    scrollTop: $("#s2").offset().top - headerHight 
    }, 600); 

    setTimeout(turnWheelBackOn,1000); 


}); 
function turnWheelBackOn() { doWheel = true; } 

document.getElementById("s2").addEventListener('wheel', function(e) { 
    e.preventDefault(); 
    if(!doWheel) return; 
    doWheel = false; 

    $('div.therest').animate({ 
    scrollTop: $("#s3").offset().top - headerHight 
    }, 600); 

    setTimeout(turnWheelBackOn, 1000); 

}); 
document.getElementById("s3").addEventListener('wheel', function(e) { 
    e.preventDefault(); 
    if(!doWheel) return; 
    doWheel = false; 

    $('div.therest').animate({ 
    scrollTop: $("#s2").offset().top - headerHight 
    }, 600); 

    setTimeout(turnWheelBackOn, 1000); 

}); 

</script> 

Answer 1

あなたのCSS設定はわかりませんが、通常、次のコードを使用して要素にウィンドウスクロールを強制します。スクロール機能をアニメートするには、htmlとbodyを使用してください。次のコードをイベントに置き換えることができます。

$("html, body").animate({ 
    scrollTop: $("#s2").offset().top - $(".header").height() //Base on your stcky header, you need to minus the header height 
},1000 /*scroll in ms*/); 

編集：あなたは

あなたはdivの上でスクロールをアニメーション化してはならないためにマイナスヘッダーの高さ、それが動作しないはずです。