Javascript 如何使用箭头键在页面上的对象之间平滑地上下滚动？

我正在建立一个非常简单的网站，在页面上垂直排列一系列图像。我想能够使用向上和向下箭头键平滑地从一个图像滚动到下一个图像，向上或向下。这样，浏览所需的击键次数将减至最少，并且可以避免向下翻页和向上翻页的不匹配间隔

---

我想这将是一个javascript函数。不过，我不是很有经验的使用JavaScript，所以我希望你可以考虑初学者的答案。现在，图像排列在一个

div

中，并用

br

分隔（多个换行符）。因此，我认为可以在每个

img

中放置

id

，或者在每个

img

周围放置识别标记，以便javascript使用。或者，也许有另一种方法可以让javascript识别通过箭头键滚动的步骤。最好的方法是什么？谢谢。

如果您了解jQuery，这是一个有趣且简单的方法。捕捉向上/向下箭头键并阻止其默认滚动动作。然后按箭头键查找下一个或上一个图像。最后，使用jQuery的animate将元素的顶部显示在视图中。当你越过列表的末尾时，你需要做一些错误检查，但我相信你可以根据这个来找出答案

---

如果您了解jQuery，这是一个有趣且简单的方法。捕捉向上/向下箭头键并阻止其默认滚动动作。然后按箭头键查找下一个或上一个图像。最后，使用jQuery的animate将元素的顶部显示在视图中。当你越过列表的末尾时，你需要做一些错误检查，但我相信你可以根据这个来找出答案

---

可以使用jquery.keydown（）事件捕获按下的箭头键。然后确定用户所在的当前（此）x，y位置（），然后将用户发送到下一张图片的锚点。可能检测到您所在的第n个子图像，并将用户发送到第n+1。这不是非常典型的web行为。也许可以看看各种carriusel插件。谢谢你的建议。如果这非常简单，我很抱歉，但由于我对javascript缺乏经验，您能否更详细地描述一下如何做到这一点？也许，用JSFIDLE？那么，我如何用它实现平滑滚动呢？谢谢。第一次尝试并不那么容易。为什么不搜索一下“jquerykeydowarrowkeys”并找到一个带有箭头键的移动图像示例来开始呢。这里有一个…您可以使用jquery.keydown（）事件捕获按下的箭头键。然后确定用户所在的当前（此）x，y位置（），然后将用户发送到下一张图片的锚点。可能检测到您所在的第n个子图像，并将用户发送到第n+1。这不是非常典型的web行为。也许可以看看各种carriusel插件。谢谢你的建议。如果这非常简单，我很抱歉，但由于我对javascript缺乏经验，您能否更详细地描述一下如何做到这一点？也许，用JSFIDLE？那么，我如何用它实现平滑滚动呢？谢谢。第一次尝试并不那么容易。为什么不搜索一下“jquerykeydowarrowkeys”并找到一个带有箭头键的移动图像示例来开始呢。这里有一个……谢谢。这很有帮助。我明白你关于错误检查的意思。在使用JSFIDLE时，如果您在第一个图像上输入向上箭头键或在最后一个图像上输入向下箭头键，它会在页面上直接运行选择器，并且向上或向下箭头键函数都不会工作（直到您刷新）。因此，我想有必要以某种方式限制第一个元素上的向上箭头键和最后一个元素上的向下箭头键。我进行了一次更新，以防止边界问题，并防止动画队列的建立。您如何编写代码以仅防止向上和向下箭头键的默认功能？现在，它似乎在阻止所有按键的默认功能。我不确定这是否是最好的方法，但我已更改为代码来移动e.preventDefault（）；从当前的位置（在上面的代码中）到每个键代码的$targetElement上方，现在似乎允许其他按键。嗯，我想如何使用它似乎仍然存在一些问题。如果img标记之间存在任何其他标记，则该效果不起作用。因此，我无法在图像之间添加文本链接，也无法使图像本身链接。此外，向上翻页和向下翻页或（如果我将导航改为向左和向右而不是向上和向下箭头）向上和向下箭头不起作用。只有javascript导航或滚动条可以工作。谢谢。这很有帮助。我明白你关于错误检查的意思。在使用JSFIDLE时，如果您在第一个图像上输入向上箭头键或在最后一个图像上输入向下箭头键，它会在页面上直接运行选择器，并且向上或向下箭头键函数都不会工作（直到您刷新）。因此，我想有必要以某种方式限制第一个元素上的向上箭头键和最后一个元素上的向下箭头键。我进行了一次更新，以防止边界问题，并防止动画队列的建立。您如何编写代码以仅防止向上和向下箭头键的默认功能？现在，它似乎在阻止所有按键的默认功能。我不确定这是否是最好的方法，但我已更改为代码来移动e.preventDefault（）；从当前的位置（在上面的代码中）到每个键代码的$targetElement上方，现在似乎允许其他按键。嗯，我想如何使用它似乎仍然存在一些问题。如果img标记之间存在任何其他标记，则该效果不起作用。因此，我无法在图像之间添加文本链接，也无法使图像本身链接。另外，向上翻页和向下翻页，或者（如果我更改了导航）

$(window).keydown(function(e) {
    e.preventDefault(); //prevent default arrow key behavior

    var targetElement;
    //down
    if (e.keyCode == 40) {
        $targetElement = $('.active').next('img');
    }
    //up
    else if (e.keyCode == 38) {
        $targetElement = $('.active').prev('img');
    }
    if (!$targetElement.length) {return;}
    $('.active').removeClass('active');
    $targetElement.addClass('active');

    //scroll element into view    
    $('html, body').clearQueue().animate({scrollTop: $targetElement.offset().top }, 1000);
});