javascript - 有没有一种方法可以在不让浏览器上下滚动的情况下使用 jQuery keydown 移动图像？

Question

我正在尝试使用 jQuery keydown 和 animate 移动长网页中间的图像。但是，每次我按上下键，浏览器也会上下滚动。当我只移动我的图像时，有没有办法让浏览器保持静态？谢谢!

index.html

<img class="pic" src="panda.jpg"/>

样式.css

.pic {
position: relative;
left: 0;
top: 0;
margin-left: 355px; 
margin-top: -180px;
}

j查询

$(document).keydown(function(key) {
    switch(parseInt(key.which,10)) 
    case 37:
    $('.pic').animate({left: "-=10px"}, 'fast');
    break;
    case 38:
    $('.pic').animate({top: "-=10px"}, 'fast');
    break;
    case 39:
    $('.pic').animate({left: "+=10px"}, 'fast');
    break;
    case 40:
    $('.pic').animate({top: "+=10px"}, 'fast');
    break;
       }
   });

Answer 1

或者call preventDefault()在事件上(您在此处作为“键”传递)，或在函数末尾返回 false:

$(document).keydown(function(key) {
    key.preventDefault();
    ...
});

或者:

$(document).keydown(function(key) {
    ...
    return false;
});

作为奖励，在这里调用 key.which 的 parseInt() 是不必要的，因为它无论如何都会返回一个数值。

由于现在显而易见的原因，这个答案被随机否决了，here is a JSFiddle demo showing preventDefault() in action .