動的ScrollTo関数は次の要素を必要とします

Question

私の例を見てください。

私のウェブサイトには複数の行があり、常にスクロールボタン（）が画面の下部にあります。

特定の時点で私のサイトのどこにあるのかによって、彼はボタンをクリックした後、次の行に移動します。

私はscrollto（）というユーザーを作成する方法を知っていますが、どのようなセレクターを使用するべきかわかりません。

function myFunction() { 
 
var winScroll = window.scrollTop; // current scroll of window 
 
// find closest div 
 
var rows = document.querySelectorAll('.row'); 
 
var closest = rows[0]; // first section 
 
var closest_idx = 0; 
 
var min = closest.offsetTop - winScroll; 
 
rows.forEach(function(row, index) { 
 
    var divTopSpace = row.offsetTop - winScroll; 
 
    if(divTopSpace < min && divTopSpace > 0) { 
 
     closest = row; 
 
     closest_idx = index; 
 
     min = divTopSpace; 
 
    } 
 
}); 
 
var next_idx = closest_idx + 1; 
 
if (next_idx == rows.length) { 
 
    next_idx = 0; 
 
} 
 
console.log(rows[next_idx]); 
 
}

.rowOne { 
 
    height: 100vh; 
 
    background-color: peachpuff; 
 
} 
 

 
.rowTwo { 
 
    height: 100vh; 
 
    background-color: firebrick; 
 
} 
 

 
.rowThree { 
 
    height: 100vh; 
 
    background-color: deepskyblue; 
 
} 
 

 
.btn { 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    height: 30px; 
 
}

<div class="main"> 
 
    <div class="row rowOne"> 
 
    <div class="a"> 
 
     <div class="b"> 
 
     Foo 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row rowTwo"> 
 
    <div class="a"> 
 
     <div class="b"> 
 
     Bar 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row rowThree"> 
 
    <div class="a"> 
 
     <div class="b"> 
 
     Foobar 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <button id="btn" class="btn" onclick="myFunction()">Button</button> 
 
</div>

事前にありがとうございます。

Answer 1

これらはすべて同じ高さ（ウィンドウの高さの100％）なので、単純にその量だけスクロールするだけです。

window.scrollBy(0, window.innerHeight); 

それ以外の場合は、現在の要素を検出して、それを次の兄弟にしてからスクロールする必要があります。このような何か（テストしていませんので、構文がオフになる場合もありますが、これはあなたのアイデアを与える必要があります）

var winScroll = window.scrollTop; // current scroll of window 
// find closest div 
var rows = document.querySelectorAll('.row'); 
var closest = rows[0]; // first section 
var closest_idx = 0; 
var min = closest.offsetTop - winScroll; 
rows.forEach(function(row, index) { 
    var divTopSpace = row.offsetTop - winScroll; 
    if(divTopSpave < min && divTopSpave > 0) { 
     closest = row; 
     closest_idx = index; 
     min = divTopSpace; 
    } 
}); 
var next_idx = closest_idx + 1; 
if (next_idx == rows.length) { 
    next_idx = 0; 
} 
window.scrollTo(rows[next_idx].scrollTop);