JS 键盘滚动

Question

我想在 ID 为 scroll0 到 scroll2 的 div 之间上下滚动：

在 index.html，我有类似的东西：

<div id="scroll0"></div>
<div id="scroll1"></div>
<div id="scroll2"></div>

脚本是：

function scrollToAnchor(aid) {
$('html,body').animate({
    scrollTop: aid.offset().top
}, 'slow');
}

var count = 1;

$(document).keydown(function (event) {
var counter = count++;
var destinationDown = "#scroll" + counter;
var destinationTop = destinationDown //counter--;

if (event.keyCode === 40) {
    //Scroll down
    scrollToAnchor($(destinationDown));
} else if (event.keyCode === 38) {
    //Scroll up
    scrollToAnchor($(destinationTop));
}
});

向下滚动没问题，但如何从不同的 div 向上滚动到顶部。

例如，如何使用 id scroll0 从 div 滚动到 scroll1 以及从 scroll1 滚动到 scroll0 ？

Answer 1

要处理上升，您不需要总是立即增加计数器。

var counter = count++;

这必须在计算出按下的键之后完成，如果键码是 38，那么您将不得不从计数中减去而不是增加。

您还必须处理环绕，因为您只有 3 个 div 可以滚动到，如果您在底部并按下，您的代码目前会中断。

我的建议是首先将您的计数器更改为索引，并在您的 keydown 处理程序中执行以下操作：

检查 up/down 是否被按下
计算要滚动到的正确的下一个索引（如果你在 0 上，然后向上按，你会转到 2。如果你在 2 上，你按下，你会转到 0。如果你在 0 上，你按下，你转到 1，等等）
更新您的索引变量
滚动到新索引

JS 键盘滚动

JS Keyboard Scroll

html

javascript

jquery

keyboard-events