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

2022-08-28 00:00:00 keypress javascript html page-jump

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

这是否可能?

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

使用某些Java脚本功能可以做到这一点吗?我考虑为按键安装一个事件监听器并自己解决所有问题,但这会相当麻烦,因为我的页面包含许多display:none(即不可见)的元素,它们当然应该被跳过。

实现此目标的正确方法是什么?


解决方案

您应该为表指定一个ID,如#table1 #table2 #table3。现在,您可以通过将这些表的ID粘贴到您的URL后面来导航到这些表。让我们用Java脚本实现这一点:

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

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

检查您试图访问的元素是否显示为None。如果已设置,请选中下一个元素,然后继续这样操作。

相关文章