使用Page Up和Page Down在HTML页面中跳转到特定点

Question

我有一个包含许多表格的HTML页面。每个表格大约铺满整个屏幕，但它们的大小有所不同。我希望用户可以使用键盘上的PgUp和PgDn键快速浏览这些表格。当按下其中任意一个键时，页面应该上下滚动一个表格并将该表格的顶部放置在屏幕的顶部。

这是否可能呢？我想过可能存在一种HTML元素可以表示分页符，以便在按下Pg**键时，浏览器可以跳转到指定位置，但是我没有找到此类元素。

是否可以使用JavaScript实现此功能？我考虑添加键盘事件监听器并自己编写所有代码，但这将非常麻烦，因为我的页面包含许多不可见（即display:none）的元素，这些元素当然应该被跳过。

实现此功能的正确方法是什么？

- Alfe

---

“一个我之前没听说过的 HTML 元素，它代表了页面分页。” - 在普通屏幕上没有“页面分页”，所以这甚至没有太多意义。使用 JS 是正确的方法，是的。 - CBroe

好的，让我们称它们为“分隔符”（<hr>或类似的），并添加一个可启用的开关，使PgUp和PgDn可以跳转到“分隔符”。 - Alfe

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表是否存在的功能。

引用： 我考虑安装一个按键事件监听器并自己解决所有问题，但这会非常麻烦，因为我的页面包含许多元素，它们都是display:none（即不可见的），当然应该被跳过。

检查您要访问的元素是否具有display:none属性。如果是，则检查下一个元素，并像这样继续进行。

- Roy Berris

---

用户在页面加载完成后可能已经滚动到第6个表格。此时按下键会将其带到第2个表格，而不是第7个表格。 - HBK

@HBK 是的，那是正确的，但那不是他的问题。他问的是如何做到这一点。我给了他一个方法，不是一个完整的项目。只是一种思考方式。 - Roy Berris