How to scroll page elements with the keyboard?

2019-02-15 13:43发布

问题:

I basically want to achieve the same effect as in Google Reader: when you press "j", you are pushed down to the next article and when you press "k", you can go back up to the previous article. What is the simplest way of doing this?

回答1:

Using onkeyup and use the keyCode to determine the key pressed: http://jsfiddle.net/pimvdb/gzRwN/1/.

document.body.onkeyup = function(e) {
    var code = e.keyCode;
    if(code === 74) { // key code for j
        window.scrollTo(document.body.scrollLeft,
                        document.body.scrollTop + 500);
    }
};


回答2:

Get the number/value for those keys and bind them to the event that you'd like them to execute. Much in the way that a click would be used to fire a function, but instead you're using a certain key.



回答3:

https://github.com/jeresig/jquery.hotkeys

jQuery Hotkeys is a plug-in that lets you easily add and remove handlers for keyboard events anywhere in your code supporting almost any key combination.