Navigasi Halaman dengan Keyboard

by Taufik Nurrohman

HTML

<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>

CSS

#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;
}

JavaScript

(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);