带滚动条的错误箭头键导航

Question

First of all I'm new to JavaScript/jQuery and English isn't my mother tongue.

In this case I can't use anything more than jQuery/JavaScript (I mean no other plugin/library, anything that I haven't coded myself).

I wanna make a website with arrow keys navigation, using overflow:hidden on my body, and scrollTop.

Here is what I already have :

<div id="slide1">
    <div id="states">
        <div id="selector"></div>
        <div id="state1"><p>INTRO</p></div>
        <div id="state2"><p>STAGE 1</p></div>
        <div id="state3"><p>STAGE 2</p></div>
        <div id="state4"><p>STAGE 3</p></div>
    </div>
</div>

<div id="slide2">
</div>

<div id="slide3">
</div>

<div id="slide4">
</div>

As i named it a bit randomly, i'll have to explain : - slide1 is my first "state" or "screen". It's a big container where I put informations about how to navigate through the website, as it's the first thing the user will see, we directly land on that state. - slide 2, 3, 4 : other big blocks will see if they navigate through the website, step by step. - state 1, 2, 3, 4 are buttons at the top of the document (position:fixed). By clicking on it, the user can jump to slide 1, 2, 3 or 4. - selector is only a design thing, if you're on slide x he puts himself on state x, that shows the user where he is in the page.

Now the JQuery part :

Variables I use :

var pressedKeys = {};
var state = [0,1200,2400,3600];
var slidestate = [0, 25, 50, 75];
var n = 0;

var state: contains in an array values I use for my scrollTop (for now each are 1200px height long.) var slidestate : contains in an array values my selector (the thing that shows the user where he is) margin (in %)

Obtaining keyCode :

$(document).keyup(function(e) {
if (e.keyCode == 40 || e.keyCode == 39) {
    n++;
    if (n>3){n--;}
}
else if (e.keyCode == 37 || e.keyCode == 38){
    n--;
    if (n<0){n++;}
    }

So n = the state where I am. I don't want it to be < 0 or > 3 that's why I use "if n>3 n--" in that case, as I have only 4 states (and my array start with a 0 index, so 0 1 2 3 = the 4 states I need).

Using var n to scroll (keyboard) :

$("html:not(:animated),body:not(:animated),#basmontagne:not(:animated)").animate({

     scrollTop:state[n]
     },1000);

$(" #selector ").animate({left:slidestate[n]+'%'},1000);

});

I don't think I have to explain anything here, I use n as the index of my array containing values I need for every state. Animation duration is 1 second.

Using var n to scroll (.click event) :

$("#state1").click(function() {
        n=0;

        $("html:not(:animated),body:not(:animated),#basmontagne:not(:animated)").animate({
        scrollTop:state[n] },1000); 

    $(" #selector ").animate({left:slidestate[n]+'%'},1000);
});

Same as below but with my and an onClick event.

The problem

The code below IS working. But there is some things I'm not able to fix. It all seems laggy, sometimes scrollTop seems to not be working;

Case 1 : I'm at the 4th state, I press "down" arrow key once, then press "up" arrow key once. It should jump to state 3, but it doesn't. I have to press "up" once again, and then it jumps to state 2. what the heck?

Case 2 : I don't know why but sometimes, when I navigate through the site, the selector moves, but scrollTop doesn't do anything. So my selector goes to state 3 where I'm only on state 1. Again what the heck? It should be the same value of n for scrollTop and selector, I don't get why it's all bugged like this.

Anyone got any idea about this ?

Answer 1

Ok, so I couldn't clearly understand what you are trying to do on the extreme cases, ie, n>3 and n<0. If your attempt was to just do nothing then you can reduce the redundancy in that bit by using,

if ((e.keyCode == 40 || e.keyCode == 39) && (n < 3))
    n = n + 1;
else if ((e.keyCode == 37 || e.keyCode == 38) && (n > 0))
    n = n - 1;

instead of,

if (e.keyCode == 40 || e.keyCode == 39) {
    n++;
    if (n>3){n--;}
}
else if (e.keyCode == 37 || e.keyCode == 38){
    n--;
    if (n<0){n++;}
}

that makes it a little more debuggable,

Coming to your main issues... Case 1 and Case 2 are because of the same problem, actually not a problem but something that was used incorrectly.

The :animated filter, read more about animated filter

So by writing, $("html:not(:animated),body:not(:animated),#basmontagne:not(:animated)") .animate({ scrollTop:state[n] },1000);

you are selecting the html, body and #basmontagne elements which are not in animation .

The issue of value of n and scrollTop not being synced at all times, precisely happens when the value of n changes in middle of an animation , because the html, body etc are in animation at that moment and are skipped by the jQuery selector, thus animation callback doesn't work at that instance.

In this fiddle here if you keep your console open you will see the value of n and scrollPosition are always on track.

If in your code this does not work it may be because the var n is globally defined and some other section of code is modifying it.

Lastly, you may also want to check the .stop() in jQuery which may make the animation better.

Hope that helps.!!