スクロールでアニメーションを固定します。

Question

画面に2つのセクションがあります。左側にはメニュー項目があり、右側にはコンテンツがあります。コンテンツdivは自動スクロールで固定位置です。

3つの項目のメニューをクリックすると、コンテンツの特定のセクション（固定）に移動することができます。

MY CODE

function goToByScroll(id) { 
      // Scroll 
      $('.content-pos-fixed').animate({ 
        scrollTop: $("#" + id).offset().top - 152 
       }, 
       'slow'); 
     } 

何らかの理由でそれは3番目の項目に移動し、その後非常に2番目の項目にスクロールして、私は最初の項目をクリックする必要があり、その後、これを試してみてください第三項目に

Answer 1

をクリックしてくださいコード

function goToByScroll(id,event) { 
    event.preventDefault(); 
    $('.content-pos-fixed').animate({ 
     scrollTop: $(id).offset().top+$('.content-pos-fixed').scrollTop() 
    },'slow'); 
} 

$(document).ready(function(){ 
 
\t $('a').on('click',function(event){ 
 
    \t var id=$(this).attr('href'); 
 
    goToByScroll(id,event); 
 
    }); 
 
    function goToByScroll(id,event) { 
 
    event.preventDefault(); 
 
    $('.content-pos-fixed').animate({ 
 
     scrollTop: $(id).offset().top+$('.content-pos-fixed').scrollTop() },'slow'); 
 
     } 
 
});

* { margin: 0; padding: 0; box-sizing: border-box; font-family: arial; text-decoration: none; color: black; } 
 

 
nav { position: fixed; top: 0; left: 0; right: 0; background: #fff; z-index: 9999; } 
 
nav a { color: white; display: inline-block; padding: 1rem; float: left; font-weight: bold; } 
 

 
section { height: 100vh; } 
 

 
nav a:nth-child(3n + 1), main section:nth-child(3n + 1) { background: #B1A464; } 
 
nav a:nth-child(3n + 2), main section:nth-child(3n + 2) { background: #2d74b2; } 
 
nav a:nth-child(3n + 3), main section:nth-child(3n + 3) { background: #e5ec10; } 
 
nav a:nth-child(3n + 4), main section:nth-child(3n + 4) { background: #cfa5df; } 
 

 
div { position: relative; padding: 1rem; } 
 

 
footer { background: rgba(255, 255, 255, 0.4); height: 55px; position: fixed; bottom: 0; left: 0; right: 0; z-index: 7777; } 
 
.down { background: white; display: block; border-radius: 100px; width: 50px; height: 50px; position: fixed; bottom: 5%; right: 5%; z-index: 8888; } 
 
.down::after { content: "▼"; position: relative; left: 15px; top: 15px; } 
 
nav a { 
 
    color: white; 
 
    display: inline-block; 
 
    padding: 1rem; 
 
    float: left; 
 
    font-weight: bold; 
 
    width: 100%; 
 
} 
 
nav { 
 
    position: fixed; 
 
    /* top: 0; */ 
 
    left: 0; 
 
    right: 0; 
 
    background: #fff; 
 
    z-index: 9999; 
 
    width: 300px; 
 
    height: 100%; 
 
} 
 
main { 
 
    float: right; 
 
    width: calc(100% - 300px); 
 
    overflow: auto; 
 
    position: fixed; 
 
    right: 0; 
 
    height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<nav data-scroll-header> 
 
\t \t \t <a data-scroll href="#Home">Home</a> 
 
\t \t \t <a data-scroll href="#About">About</a> 
 
\t \t \t <a data-scroll href="#Services">Services</a> 
 
\t \t \t <a data-scroll href="#Contact">Contact</a> 
 
\t \t </nav> 
 
     
 
     <main class="content-pos-fixed"> 
 
      <section id="Home"> 
 
       <div> 
 
        <h1>Home</h1> 
 
       </div> 
 
      </section> 
 
      
 
      <section id="About"> 
 
       <div> 
 
        <h1>About</h1> 
 
       </div> 
 
      </section> 
 
      <section id="Services"> 
 
       <div> 
 
        <h1>Services</h1> 
 
       </div> 
 
      </section> 
 
      <section id="Contact"> 
 
       <div> 
 
        <h1>Contact</h1> 
 
       </div> 
 
      </section> 
 
     </main> 
 

 
<footer> 
 
    <a data-scroll href="#About" class="down"></a> 
 
</footer>