1

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

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

4

1 回答 1

0

将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以防止通过其他方式（滚动条、鼠标滚轮）滚动以确保滚动以适当的增量。

于 2013-01-28T02:20:24.037 回答