1

I'm trying to make a nav that scrolls to a corresponding <div> for my site. The corresponding divs are nested inside another div with a max-height and scrollbar. That's when my jquery tends to fail me.

He's a fiddle from another question that I related to my problem: JSFIDDLE

Notice when you click the button, it doesn't scroll to the correct div, and it scrolls to an awkward position when clicked again.

How do I get it to scroll to the correct div and not strangely scroll back when it is clicked again? Thanks!

Kragalon
  • 420
  • 1
  • 6
  • 25

2 Answers2

3

$(".third").offset().top) alternates coordinates between 1108 and 0 when clicked. These are the correct positions of .third before each click. You have to take into account the current scroll position and the position of the .first div.

Replace the scrollTop line of code with the following:

scrollTop: $(".third").position().top - $('div.nest').position().top + $('div.nest').scrollTop()},

http://jsfiddle.net/pyL62v58/3/

AaronS
  • 465
  • 1
  • 7
  • 10
0

The Code works, it seems to be a padding/margin issue.

Just add this line in the css, and it should work:

* {paddin:0;margin:0}
/*  tested on Chrome 39+ on Win7 */

here the Updated fiddle

Why it jumps up again, is hopefully clear. Documentation to the "offset" function can be found here: jQuery-Doc

winner_joiner
  • 12,173
  • 4
  • 36
  • 61