Direkt zu einem anderen div verschieben (Übergang)

Question

Ich erstelle eine Präsentationswebsite und muss eine Art Übergangsskript schreiben, das beim Scrollen aktiviert wird. Ich habe ein paar divs mit großer Lücke zwischen ihnen ...

.div { 
    padding: 20% 0% 20% 0%; 
} 

Dies macht eine wirklich große Lücke zwischen divs. Jetzt möchte ich, was einige JS schreiben, wird sanft von <div class="bio"> </div> bewegen <div class="projects"> </div>"

Dies ist die Struktur meiner HTML

  <div class="col s12 m6"> 
       <div class="section"> 
        <div id="bio" class="bio center col s12"> 
         <h2> About us </h2> 
         <hr class="section-title" /> 
         <p> 
          Text 
         </p> 
        </div> 
       </div> 
      </div> 
      <div class="col s16 m6"> 
       <div class="section"> 
        <div id="projects" class="projects center"> 
        <h2> Our projects </h2> 
        <hr class="section-title" /> 
        <div class="project"> 
         <h3> Title of project </h3> 
         <p> 
          Some text 
         </p> 
        </div> 
        <h3> Planning to do </h3> 
         <span class="nothing"> Another text </span> 
        </div> 
       </div> 
      </div> 
      <div class="col s16 m6"> 
       <div class="section"> 
        <div id="contact" class="footer center"> 
         <h2> Contact us </h2> 
         <hr class="section-title" /> 
         <p> Some contacts </p> 
        </div> 
       </div> 
      </div> 

Haben Sie Tipps, wie einfache Übergänge zwischen divs machen?

Answer 1

können Sie die Funktion scrollIntoView von Dom-Objekten verwenden. Ich habe eine Geige beispielhaft, wie Sie dies tun können. https://jsfiddle.net/dhiogoboza/fqb2sqt7/3/

function scrollToElement(selector) { 
    var el = document.querySelector(selector);  
    el.scrollIntoView({'behavior': 'smooth', 'block': 'start'}); 
}