順利直接移至另一個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'});
}