我试图通过按某个键滚动到某个元素。在我的例子中，我只有'h'的代码将页面带回到home部分。但是，按下'h'时没有任何反应。
我使用的代码与此类似，没有使用按键，我想知道为什么这段代码不起作用。没有错误。
$(document).ready(function() {
$(document).keypress(function(e) {
var pos = $(window).scrollTop();
var speed = 1.5;
var home = $('#home').scrollTop();
var one = $('#one').scrollTop();
var two = $('#two').scrollTop();
var three = $('#three').scrollTop();
var four = $('#four').scrollTop();
var five = $('#five').scrollTop();
var six = $('#six').scrollTop();
var seven = $('#seven').scrollTop();
var eight = $('#eight').scrollTop();
var nine = $('#nine').scrollTop();
var ten = $('#ten').scrollTop();
if (e.which == 72) {
var distance = Math.abs(pos - home);
var scrollSpeed = distance * speed;
$('html, body').animate({
scrollTop: home
}, scrollSpeed);
}
});
});section {
height: 100vh;
width: 100vw;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<section id="home">
<div class="col-md-offset-2 col-md-8 home">
<h1 id="welcome">Welcome</h1>
<p id="intro">Type a number 1-9, 0 is for 10 and typing 'h' will bring you back to the home screen</p>
</div>
</section>
<a href="http://www.buildinamsterdam.com/cases" target="_blank">
<section id="one">
<div class="col-md-offset-2 col-md-8 one">
<h1 id="h1">Horizontal Scroll</h1>
<p id="p1">A page or section that scrolls horizontally instead of vertically. A unique way to shorten a page.</p>
</div>
</section>
</a>
<a href="http://hollow.org.uk/" target="_blank">
<section id="two">
<div class="col-md-offset-2 col-md-8 two">
<h1 id="h2">Gallery Zoom</h1>
<p id="p2">Have items in my gallery slowly zoom in or out.</p>
</div>
</section>
</a>
<a href="http://www.cartoonnetworkstudios.com/" target="_blank">
<section id="three">
<div class="col-md-offset-2 col-md-8 three">
<h1 id="h3">Interactive Name</h1>
<p id="p3">Have a home page with my name in large lettering, each letter when hovered over would have an effect, bringing up a word that describes my services.</p>
</div>
</section>
</a>
<a href="http://ony-france.com/origin" target="_blank">
<section id="four">
<div class="col-md-offset-2 col-md-8 four">
<h1 id="h4">Overlapping Gallery</h1>
<p id="p4">Have Pieces in my gallery set up on a parallax scroll and overlap each other slightly.</p>
</div>
</section>
</a>
<a href="https://my.pottermore.com/patronus" target="_blank">
<section id="five">
<div class="col-md-offset-2 col-md-8 five">
<h1 id="h5">Mouse Trail</h1>
<p id="p5">Have a mouse trail on my landing page that is made up of 1's and 0's to signify binary code.</p>
</div>
</section>
</a>
<a href="https://spotify---bastille.appspot.com/" target="_blank">
<section id="six">
<div class="col-md-offset-2 col-md-8 six">
<h1 id="h6">Moving Text</h1>
<p id="p6">Having a parallax image has become pretty common but having other elements on the page also move with the mouse is rather unique.</p>
</div>
</section>
</a>
<a href="https://www.oasen.nl/home/mijn-oasen" target="_blank">
<section id="seven">
<div class="col-md-offset-2 col-md-8 seven">
<h1 id="h7">Element Loading</h1>
<p id="p7">Have elements load at separate times, rather than everything loading at once.</p>
</div>
</section>
</a>
<a href="http://counterclimate.converse.com/" target="_blank">
<section id="eight">
<div class="col-md-offset-2 col-md-8 eight">
<h1 id="h8">Mouse Distortion</h1>
<p id="p8">Cause the mouse to distort certain things on a page when you move over it.</p>
</div>
</section>
</a>
<a href="https://www.sirinlabs.com/" target="_blank">
<section id="nine">
<div class="col-md-offset-2 col-md-8 nine">
<h1 id="h9">3D Translate</h1>
<p id="p9">Have a 3D Orb where each piece of orb is a gallery piece which translates out on hover.</p>
</div>
</section>
</a>
<a href="http://piratecode.ru/en/" target="_blank">
<section id="ten">
<div class="col-md-offset-2 col-md-8 ten">
<h1 id="h10">Countdown</h1>
<p id="p10">A dynamic loading page that counts down or has some kind of display that will count down.</p>
</div>
</section>
</a>
答案 0 :(得分：2)
它'因为72是JavaScript char code，可以使用e.keyCode进行访问。更常见的是使用jQuery e.which，它是keydown或keyup等事件的关键代码。例如h是104：
if(e.which == 104) {}
答案 1 :(得分：0)
根据文档
https://api.jquery.com/keypress/
由于任何官方规范都没有涵盖按键事件，因此使用它时遇到的实际行为可能因浏览器，浏览器版本和平台而异。
对于mozilla来说，按键将起作用，而e.which将为72
$("#target").on("keypress", function(e) {
var pos = $(window).scrollTop();
var speed = 1.5;
var home = $('#home').scrollTop();
var one = $('#one').scrollTop();
var two = $('#two').scrollTop();
var three = $('#three').scrollTop();
var four = $('#four').scrollTop();
var five = $('#five').scrollTop();
var six = $('#six').scrollTop();
var seven = $('#seven').scrollTop();
var eight = $('#eight').scrollTop();
var nine = $('#nine').scrollTop();
var ten = $('#ten').scrollTop();
console.log(e.keyCode)
if(e.which == 72) {
var distance = Math.abs(pos - home);
var scrollSpeed = distance * speed;
$('html, body').animate({
scrollTop: home
}, scrollSpeed);
}
});
用于chrome keydown事件可以用于相同的e.keyCode = 72
$("#target").on("keydown", function(e) {
var pos = $(window).scrollTop();
var speed = 1.5;
var home = $('#home').scrollTop();
var one = $('#one').scrollTop();
var two = $('#two').scrollTop();
var three = $('#three').scrollTop();
var four = $('#four').scrollTop();
var five = $('#five').scrollTop();
var six = $('#six').scrollTop();
var seven = $('#seven').scrollTop();
var eight = $('#eight').scrollTop();
var nine = $('#nine').scrollTop();
var ten = $('#ten').scrollTop();
console.log(e.keyCode)
if(e.keyCode == 72) {
var distance = Math.abs(pos - home);
var scrollSpeed = distance * speed;
$('html, body').animate({
scrollTop: home
}, scrollSpeed);
}
});