(function(win, doc) { var pager = false; // left = 37, right = 39 doc.onkeydown = function(e) { switch (e.keyCode) { case 37: pager = doc.getElementById('blog-pager-newer-link'); break; case 39: pager = doc.getElementById('blog-pager-older-link'); break; } if (pager) { pager.className = pager.className += ' active'; win.location.href = pager.children[0].href; return false; } }; doc.onkeyup = function(e) { switch (e.keyCode) { case 37: pager = doc.getElementById('blog-pager-newer-link'); break; case 39: pager = doc.getElementById('blog-pager-older-link'); break; } if (pager) { pager.className = pager.className.replace(/ active/g, ""); } }; })(window, document);
#blog-pager { position:fixed !important; position:absolute; top:50%; right:0; left:0; z-index:9999; } #blog-pager a { display:block; height:50px; line-height:50px; margin:-25px 0 0; padding:0 16px; background-color:black; color:white; text-decoration:none; outline:none; } #blog-pager-newer-link {float:left} #blog-pager-older-link {float:right} #blog-pager-older-link.active a, #blog-pager-newer-link.active a, #blog-pager-older-link a:active, #blog-pager-newer-link a:active { background-color:red; color:white; }
<div id="blog-pager"> <span id="blog-pager-older-link"><a href="#">Older</a></span> <span id="blog-pager-newer-link"><a href="#">Newer</a></span> </div>