如何使用箭头键导航垂直页面

Question

我有一个网页，上面有照片。我希望观众能够使用箭头键（上、下、左、右）前进。通常向下键滚动大约 10 个像素。我想要向下键和向右键前进到下一张照片，或者说，1000 像素。我希望向上和向左键做同样的事情，但相反，所以向后滚动页面相同的 1000 像素。我想为每组照片分配一个锚 (#) 标签，然后让页面滚动到下一个标签。我几乎不知道 HTML、CSS、Javascript 和 Jquery，所以我需要耐心的回复来帮助我解决这个问题。

我正在使用的页面是my personal site，我想在我网站上的所有页面上应用这种相同类型的键盘导航。

Answer 1

将keydown 事件监听器附加到窗口，然后查看它是否是箭头键（keyCode 37 为左，38 为上，39 为右，40 为下）并调整document.body.scrollTop（和document.documentElement.scrollTop 为一些浏览器）相应地。

例如：

var handler = function(e) {
    e = e || window.event;
    var k = e.keyCode || e.which;
    switch(k) {
      case 37:
        document.body.scrollLeft -= 1000;
        document.documentElement.scrollLeft -= 1000;
        break;
      case 38:
        document.body.scrollTop-= 1000;
        document.documentElement.scrollTop-= 1000;
        break;
      case 39:
        document.body.scrollLeft += 1000;
        document.documentElement.scrollLeft += 1000;
        break;
      case 40:
        document.body.scrollLeft += 1000;
        document.documentElement.scrollLeft += 1000;
        break;
      default: return true;
    }
    if( e.preventDefault) e.preventDefault();
    return false;
};
if( window.attachEvent) window.addEvent("onkeydown",handler,false);
else window.addEventListener("keydown",handler,false);

您可能还想添加 overflow:hidden 以防止通过其他方式（滚动条、鼠标滚轮）滚动，以确保滚动以适当的增量。