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

Question

我有一个很大的 HTML 页面，其中包含一长串表格。每张 table 都和屏幕一样大，但大小略有不同。我想让用户能够使用键盘上的 PgUp 和 PgDn 键快速浏览表格。每按一次这些键中的一个，就会向上或向下移动一张 table ，并将 table 的顶部恰好放在屏幕的顶部。

这可能吗？

我认为可能有一个我还没有听说过的 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 的表是否存在

I considered installing an event listener for key presses and working everything out myself, but that would be rather cumbersome because my page contains a lot of elements which are display:none (i. e. invisible) and they should of course be skipped.

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