title: Slider changes scrolling of the screen when clicked
body: <p>I am working on a website <a href="http://dev.io-web.com/portfolio.aspx" rel="nofollow">http://dev.io-web.com/portfolio.aspx</a> and am having difficulty with the slider that I programmed. <strong>For some reason when you click to change slides it resets the position of the scrolling on the site to the top. Is there a way to make it not change the position of the screen?</strong> I'll include part of the code for the slider as well so it's easier to understand what I'm doing:</p>
  
  <pre><code>$(".slide1").click(function() {
      if(current_slide != "slide1"){
              $(".arrow").animate({"margin-left":"349px"});
              if(current_slide == "slide2"){
                  $(".slide2_display").stop(true,true).fadeOut().hide();
                  $(".slide1_display").fadeIn().show();
                  current_slide = "slide1";
                  $("#slide2content").hide();
                  $("#slide1content").show();
              }
              else if(current_slide == "slide3"){
                  $(".slide3_display").stop(true,true).fadeOut().hide();
                  $(".reps_display").fadeIn().show();
                  current_slide = "slide1";
                  $("#slide3content").hide();
                  $("#slide1content").show();
              }
              else{
                  $(".slide4_display").stop(true,true).fadeOut().hide();
                  $(".slide1_display").fadeIn().show();
                  current_slide = "slide1";
                  $("#slide4content").hide();
                  $("#slide1content").show();
              }
  
      }
  });
  </code></pre>
  
  <p>I have this coded for each of the 4 different displays. It should only change the displays and not change the scrolling of the page, but maybe the click function automatically does something like that. Any help with a solution would be greatly appreciated. Feel free to take a look at the work in progress at the url listed above.</p>