滚动到按键元素

Question

我想通过按某个键可以滚动到某个元素。在我的示例中，我只有'h'的代码才能将页面返回到主页部分。但是，按'h'时没有任何反应。

我已经使用类似这样的代码，而不使用按键，我想知道为什么这个代码不工作。没有错误。

JSFIDDLE

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

Answer 1

这是因为图72是其可使用e.keyCode访问的JavaScript char code。在jQuery中更常见的是e.which，它是​​或keyup这类事件的关键代码。例如h是104：

if(e.which == 104) {} 

Answer 2

按照该文档

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

铬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); 
    } 
}); 

工作小提琴： https://jsfiddle.net/skp6kLzw/