0

So I am using the down arrow key to set off a Jquery .animate() function. Currently, when the down arrow key is pressed, it does the animation, but also moves the browser page down. Is there a way for me to disable the downward movement set into action by pressing the down arrow key, but also have it call the .animate() function? My animate function is below..

<script>
$(document).on('keyup',function(evt) {
    if (event.which == 40) {
        alert('down key was pressed');
    }
});
</script>

Thanks in advance!

Pseudo Sudo
  • 1,402
  • 3
  • 16
  • 34
  • 1
    `evt.preventDefault()` ? Also, your `event.which` should be `evt.which` – somethinghere Nov 27 '15 at 16:47
  • 1
    Possible duplicate of [Disable arrow key scrolling in users browser](http://stackoverflow.com/questions/8916620/disable-arrow-key-scrolling-in-users-browser) – BeNdErR Nov 27 '15 at 16:49
  • 2
    I think you'd want to preventDefault on the keydown, not the keyup... the browser's native scrolling behavior is likely happen when the key is pressed not when it's released. – joshstrike Nov 27 '15 at 16:49

1 Answers1

4

You can prevent normal behavior by using event.preventDefault()

<script>
$(document).on('keydown',function(evt) {
    if (evt.which == 40) {
        evt.preventDefault();
        alert('down key was pressed');
    }
});
</script>

that should do the trick

A. Wolff
  • 74,033
  • 9
  • 94
  • 155
CapitanFindus
  • 1,498
  • 15
  • 26