同様の質問がなされたことは知っていますが、私のジレンマを解決するものはないようです。だからここに行きます!
上下の矢印キーを使用して移動したいページにセクションがあります。最初のものは「ヘッダー」と呼ばれ、残りは「モジュール」と呼ばれます。スクロール時に「ヘッダー」と「モジュール」を区別する問題は言うまでもなく、「次へ」の数値を更新するのに問題があります。
これが私のHTMLです
<div id="pages">
<div class="header"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
</div>
そして私のJQuery
$(document).keydown(function (e) {
var keyCode = e.keyCode || e.which,
arrow = {left: 37, up: 38, right: 39, down: 40 },
elements = $(".module,.header"),
next = 0,
max = elements.length;
switch (keyCode) {
case arrow.down:
if(next+1 < max) {
next++;
$("#pages").scrollTo(elements[next], 800, { axis:"y" });
console.log(next);
}
break;
case arrow.up:
if(next-1 > -1) {
next--;
$("#wrap").scrollTo(elements[next], 800, { axis:'y' });
}
break;
}
});
どんな助けやアドバイスも大歓迎です!