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.
Post a Comment for "Jump To Specific Points In A Html Page Using Page Up And Down"