On many sites, pages can be navigated using the keyboard by pressing the ← and → keys while holding the Ctrl key.

What this requires is generally understandable. Somewhere in the code, you need to hide the addresses of the previous and next pages and “hang up” the handler at the touch of a key.

Where to write the address? In general, anywhere. We use tag <link>, adding ID to it:

<link rel="next" href="/portfolio/toyota/2005/" id="NextLink" />
<link rel="prev" href="/portfolio/samsung/megaded/" id="PrevLink" />
<script type="text/javascript" src="/more/navigate.js"></script>

This choice solved another problem – some browsers respond to these tags by displaying additional buttons on the navigation bar.

It remains to hang up the handler for the onkeydown event:

document.onkeydown = NavigateThrough;

And wait until one of the arrows is pressed:

function NavigateThrough (event)
{
	. . .
	switch (event.keyCode ? event.keyCode : event.which ? event.which : null)
	{
		case 0x25:
			link = document.getElementById ('PrevLink');
			break;
		case 0x27:
			link = document.getElementById ('NextLink');
			break;
	}
	if (link && link.href) document.location = link.href;	
}

Opera is an exception. This browser transfers control to the event handler after default action execution (the Ctrl + arrow combination already taken).

Therefore, in Opera, it is necessary to press not only the Ctrl button but also Shift. A three-key combination corresponds to navigation through links from tags.

When you do such things, it is significant to correctly figure out which page to consider the previouы and which next.

Blog