Note that there are some explanatory texts on larger screens.

plurals
  1. POSlider changes scrolling of the screen when clicked
    text
    copied!<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>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload