Switch to div, going back to the top of the page

Question

I have a page with interactive divs that switch content when clicked. When the div button (closing content) is pressed a second time, the page jumps up.

I see that this is the problem of other people, but all the solutions that I found are related to the anchor tag, which is not a problem here.

I tried changing my code to a solution here and added return false; and event.preventDefault(); but none of them worked. What am I doing wrong?

jQuery:

  $(document).ready(function(){ $('h1').animate({"right":"147px"},3000); $('.more').toggle( function(){ $(this).css({ 'z-index':'100', 'background-position': '41px 0px' }); $('#heroFullColor').hide(); $('#heroNoColor').show(); $('div.' + $(this).attr('id')).fadeIn('fast'); $('.more').not(this).hide(); }, function(){ $(this).css({ 'background-position': '0px 0px' }); $('div.' + $(this).attr('id')).fadeOut('fast'); $('#heroNoColor, .infoWindow').hide(); $('#heroFullColor').fadeIn('fast'); $('.more').not(this).show(); }); }); 

HTML structure (this repeats several times on the page):

  <div class="more" id="franceFlag"></div> <div class="infoWindow franceFlag"> <img class="imageOn" src="images/lp_foundry_on-franceFlag.jpg" width="71" height="213" alt="French Flag" id="franceFlagOn" /> <p class="franceFlag">blah blah blah</p> </div> <div class="more" id="heliBoth"></div> <div class="infoWindow heliBoth"> <img class="imageOn" src="images/lp_foundry_on-heliBoth.jpg" width="296" height="750" alt="Helicopters" id="heliBothOn" /> <p class="heliBoth">blah blah blah</p> </div> 

Here is the fiddle - if you scroll right to the right and click the + sign next to the flag, you'll see what I mean.

Answer 1

This is because you are hiding an element that gave the height of your container and then showing another. Therefore, it has no height.

If you explicitly pointed your container to a height, this will not happen. eg.

 #lp-foundry-container { height: 940px; } 

The same does not happen the first time you click, because you hide and show instantly. If you want to change

 $('#heroNoColor').show(); 

to

 $('#heroNoColor').fadeIn('fast'); 

As with the close function, the same thing will happen the first time you click.

Answer 2

try it

---

JQuery

 $(document).ready(function(){ $('h1').animate({"right":"147px"},3000); $('.more').toggle( function(){ $(this).css({ 'z-index':'100', 'background-position': '41px 0px' }); $('#heroFullColor').hide(); $('#heroNoColor').show(); $('div.' + $(this).attr('id')).fadeIn('fast'); $('.more').not(this).hide(); }, function(){ $(this).css({ 'background-position': '0px 0px' }); $('div.' + $(this).attr('id')).fadeOut('fast'); $('#heroNoColor, .infoWindow').hide(); $('#heroFullColor').fadeIn('fast'); $('.more').not(this).show(); }); //What I added $(".more").click(function() { var div = $(this); $(window).scrollTop(div.offset().top).scrollLeft(div.offset().left); }); }); 

Basically you just take the current top and left positions of the clicked div and set the page to position yourself at that moment as soon as you are done.

Demo Screenshot

By the way, this is a pretty cool idea, good job!

Answer 3

The only thing I know is the following:

  $(document).ready(function(){ .... $('.more').toggle( function(){ ... }, function(){ var tempTop = $(window).scrollTop(); //<----remember Y var tempLeft = $(window).scrollleft(); //<----remember X .... your code here ... //----> now restore the position $(window).scrollTop(tempTop); $(window).scrollLeft(tempLeft); } );