Page is jumping to top when clicking on thumb images

Question

I've image slider,

<div class="slider">
  <div id="image_large_1">
      <img src="../1.png" alt="">   
  </div>
  <div id="image_large_2">
      <img src="../2.png" alt="">   
  </div>
</div>

<!-- Slider close,thumb start -->

<div class="thumbs_div">
  <div id="thumb_1">
     <img src="../1_t.png" alt="" id="thumb_1">   
  </div>
  <div id="thumb_2">
     <img src="../2_t.png" alt="" id="thumb_2">   
  </div>
</div>

When user clicks on thumb image then its corresponding large size image will display in slider div. Everything is working fine but when I click on thumb image then page is jumping to top,what might be the problem ? following is the jQuery code.

$("div[id^=image_large_]:gt(0)").hide();
$("div.thumb_div img").click(function(){

       div_id = $(this).attr('id').substring('thumb_'.length);
       $("div[id^=image_large_]").hide();
       $("div#image_large_"+div_id).fadeIn('slow');

    });

Answer 1

If your slider div does not have specified dimensions, then it collapses when the image_large_* divs are hidden by this line:

 $("div[id^=image_large_]").hide();

With the result that content lower down the page will move up will jump up when .hide() completes.

Try giving the large image container divs the same dimensions as the images they contain.