jQueryの次のセクションに自動的にスクロールする方法は？

Question

スニペットを参照してください。ビューポートのフルサイズを含むいくつかのセクションがあります。ユーザーがスクロールしているときに自動的に ".section"クラスの次のスクロールにスクロールする必要があります

英語は私の主な言語ではありません。文法やsthのような誤解をおかけして申し訳ありません。

$(document).ready(function(e){ 
 

 
    var position = $(window).scrollTop(); 
 

 
    $(window).scroll(function() { 
 
     
 
     var scroll = $(window).scrollTop(); 
 

 
     if(scroll > position) { 
 
     
 
     //scrolling down 
 
      
 
     } else { 
 
     //scrolling up 
 
     } 
 
     
 
     position = scroll; 
 

 
    }); 
 
});

html,body { margin:0;padding:0;width: 100%;} 
 

 
.section { 
 
    width: 100%; 
 
    height:100vh; 
 
    background-color:#000; 
 
} 
 

 
.section:nth-child(odd) { background-color:#fff;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section id="Home" class="section"></section> 
 
    <section id="Home" class="section"></section> 
 
    <section id="Home" class="section"></section> 
 
    <section id="Home" class="section"></section> 
 
    <section id="Home" class="section"></section>

Answer 1

まず、私はアニメーションのatributeとjQueryのコードを使用した後、私は次のdiv

に行くために機能し、カウンタを起動するボタンを使用し、div要素に番号を付けるだろう

<section id="H1" class="section"><button>btn</button></section> 

<section id="H2" class="section"><button>btn</button></section> 

<section id="H3" class="section"><button>btn</button></section> 

<section id="H4" class="section"><button>btn</button></section> 


<script> 
var ndiv=1; 
    $("button").on('click', function(event) { 

    event.preventDefault(); 

    // Store hash 
    var hash = "#H"+ ndiv; 

     // Using jQuery's animate() method to add smooth page scroll 
     // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area 
     $('html, body').animate({ 
     scrollTop: $(hash).offset().top 
     }, 800, function(){ 

     window.location.hash ="H"+ ndiv; 
     }); 

ndiv++; 
}); 
</script>