JavaScript scroll to element on binded keydown events in jQuery

Question

I am trying to scroll to 2 different elements in a keydown event, 1st element on the first press, 2nd element on second press, and repeat the event after every 2 presses (or hits). I created a JSFiddle demo, linked below.

FIDDLE

As you can see, it will not scroll to the bottom element on the second press (or hit). The only thing I can think of is using something else besides ".offset().top" for the second event. But if some of you JS gurus look at my code you may see the bug or perhaps another solution for the desired effect. Thanks in advance!

.offset().top ???

MAIN BUG SOLVED, but new bug revealed.. Is there a way to reset the hit variable to ZERO if the user clicks the UP arrow??

NO MORE BUGS! FEEL FREE TO USE THIS SCRIPT ALL YOU WANT!

fin · Accepted Answer · 2012-10-21 01:01:05Z

0

See the definitions of offset

Get the current coordinates of the first element in the set of matched elements, relative to the document.

the problem here is when you animated the #wrap element, its offset changes the easiest solution is to get its position beforehand, see my edited JSfiddle. Add the following two lines of code, and do the animation according to spot1/spot2. The switch case executes fine.

var spot1 = $("#scrollToHere2").position().top;
var spot2 = $("#scrollToHere").position().top;

answered Oct 21, 2012 at 1:01

fin

1,2991 gold badge10 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Jim22150 Over a year ago

Great solution, that worked out wonderfully. I would vote up if my rep was up. Who ever else reads this, feel free to use my (and fin's) code for your future websites, and vote up, this is very useful.

Jim22150 Over a year ago

Fin, is there any way to reset the variable to ZERO if pressing the UP arrow, in case a user clicks the UP arrow after only clicking the DOWN arrow once, instead of clicking it twice?

Jim22150 Over a year ago

Hmm, looks like we both resolved it in different ways. You added (!firstdown) but I simply added hits = 0. Which way is better? I do not know that syntax.

Jim22150 Over a year ago

Or, not syntax, but I didn't know you could play with a variable like that, cool stuff. I guess the bigger question would be, which is better for the following scenario: I have #wrap inside a slideshow, #wrap is in slide 1, but when the user clicks on slide 2 or 3, "hits" or "firstdown" needs to be reset.... I think I'll figure it out, thanks again for your great insight!

Jim22150 Over a year ago

Yea, I figured it out. I just make hits = 0 for every time a slide link is pressed.

|

Collectives™ on Stack Overflow

JavaScript scroll to element on binded keydown events in jQuery

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related