顺利移动到另一个div（过渡）

Question

我正在创建一个演示文稿网站，需要编写某种过渡脚本，当你开始滚动时它会激活。我有几个div，他们之间差距很大......

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

这使得div之间存在很大的差距。现在我想写一些JS将从<div class="bio"> </div>平稳地移动到<div class="projects"> </div>"

这是我的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>

你有任何提示如何在div之间进行简单的过渡吗？

Answer 1

你可以使用dom对象的scrollIntoView函数。我创造了一个小提琴，例证你如何做到这一点：https://jsfiddle.net/dhiogoboza/fqb2sqt7/3/

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