Scroll through multiple divs from anchor to anchor

Question

I have another question. Recently I am trying to build a page with three divs. Each of them has a height of 100vh and a width of 100vw. The thing I want to archive is, that if I am scrolling in div 1 that it automatically scrolls smooth to the top of div 2. And so on. I hope that you understand my question.

 div { width: 100vw; height: 100vh; } div:nth-child(odd) { background-color: green; } div:nth-child(even) { background-color: red; } 

 <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> 

Answer 1

You can use fullpage.js

 new fullpage('#fullpage', { scrollOverflow:true }); 

 .section:nth-child(odd) { background-color: green; } .section:nth-child(even) { background-color: red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.7/fullpage.min.js" integrity="sha256-e13jRNqOX98m6UAwI/yZTpcDseJtA8s86yfFs4Sqrv8=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.7/vendors/scrolloverflow.min.js" integrity="sha256-R7CttZ4L0/szai0hbFUlPDiRaEJmqYuvLhyAOr19vQg=" crossorigin="anonymous"></script> <div id="fullpage"> <div class="section">Some section</div> <div class="section">Some section</div> <div class="section">Some section</div> <div class="section">Some section</div> </div>