Shniper Shniper - 10 days ago 5
Javascript Question

Scroll to element on keypress

I am trying to make it possible to scroll to a certain element by pressing a certain key. In my example I have only the code for 'h' to bring the page back to the home section. However, nothing happens when 'h' is pressed.

I have used code similar to this without using a keypress and am wondering why this code isn't working. There are no errors.

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

It' because 72 is a JavaScript char code which can be accessed using e.keyCode. More commonly in jQuery e.which is used and is the key code of the event like keydown or keyup. For example h is 104:

if(e.which == 104) {}