Moving directly to another div smoothly (transition)

Question

I am creating a presentation website and need write some kind of transition script which will activate when you start scrolling. I have few divs with big gap between them...

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

This makes a really big gap between divs. Now I want to write some JS what will smoothly move from <div class="bio"> </div> to <div class="projects"> </div>"

This is structure of my 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>

Do you have any tips how to make simple transitions between divs?

Answer 1

you can use the function scrollIntoView from dom objects. I created a fiddle exemplifying how you can do this: https://jsfiddle.net/dhiogoboza/fqb2sqt7/3/

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