使用 Page up 和 down 跳转到 HTML 页面中的特定点

Question

我有一个包含一长串表格的大型 HTML 页面。每张桌子大约和屏幕一样大，但大小略有不同。我想让用户使用键盘上的 PgUp 和 PgDn 键来快速浏览表格。每次按下这些键中的任何一个，都会向上或向下移动一张桌子，并将桌子的顶部准确地放在屏幕的顶部。

这可能吗？

我认为可能有一个我还没有听说过的 HTML 元素表示分页符，因此如果按下 Pg** 键之一，浏览器将准确跳转到那里，但我没有找到。

这可能使用一些 Javascript 功能吗？我考虑为按键安装一个事件监听器并自己解决所有问题，但这会相当麻烦，因为我的页面包含很多 display:none 元素（即不可见），当然应该跳过它们。

实现这一目标的正确方法是什么？

Answer 1

您应该为您的表指定一个 ID，例如 #table1 #table2 #table3。您现在可以通过将它们的 ID 粘贴到您的 URL 后面来导航到这些表。让我们用 javascript 实现它：

var currTable = 1;

document.addEventListener('keydown', function(event) {
 if(event.keyCode == 33) {
     // PageUp was pressed
     if (currTable - 1 > 0) {
       currTable--;
       window.location.hash = "#table" + currTable;
     }
 }
 else if(event.keyCode == 34) {
     // PageDown was pressed
     currTable++;
     window.location.hash = "#table" + currTable;
 }
});

这是基本示例。如果您愿意，您可以检查具有该特定 ID 的表是否存在

我考虑为按键安装一个事件侦听器并自己解决所有问题，但这会相当麻烦，因为我的页面包含很多显示元素：无（即不可见），当然应该跳过它们。

检查您尝试访问的元素是否显示为无。如果有，检查下一个元素，然后像这样继续。