Jump To Specific Points In A Html Page Using Page Up And Down

I have a large HTML page consisting of a long list of tables. Each table is about as large as the screen, but varies slightly in size. I'd like to enable the user to use the PgUp

Solution 1:

You should give your tables an ID, like #table1 #table2 #table3. You can now navigate to these tables by pasting their ID behind your URL. Lets implement this with javascript:

var currTable = 1;

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

This is the basic example. If you want to, you could implement a check if the table with that specific ID exists

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.

Check if the element you're trying to access has a display of none. If it has, check the next element, and continue like this.