njdubois Posted September 19, 2014 Share Posted September 19, 2014 I am trying to make a simple vertical scrolling slideshow type page. I have 1 div that is 100% width and height of the body and inside that 4 divs that are 100% w&h one below the other. In each "slide" div is an input button with an onclick call to a JavaScript function that uses jquery animate and scrolltop to move to the next div. Moving from the first to second is OK. It will not move from second to third. If I set each inner divs height to 90%, I can see the third div's next button. Clicking that moves the third slide to the top, though it is supposed to move the forth slide to the top. Not sure what I'm missing? I hope my attempt to paste the code on my note 3 works OK! Thanks for even looking! Nick <code> <html> <head> </head> <body style="margin:0px;padding:0px;"> <style> .a_slide { width:100%;height:100%;background-color:blue; } .b_slide { width:100%;height:100%;background-color:green; } .c_slide { width:100%;height:100%;background-color:blue; } .d_slide { width:100%;height:100%;background-color:green; } </style> <div style="width:100%;height:100%;overflow:hidden;margin-left:auto;margin-right:auto;" id="container" name="container" class="container"> <div class="a_slide" id="a_slide">a <input type="button" onclick="move(this.name);" name="b_slide" value="Next Page"> </div> <div class="b_slide" id="b_slide">b <input type="button" onclick="move(this.name);" name="c_slide" value="Next Page"> <input type="button" onclick="move(this.name);" name="a_slide" value="top"> </div> <div class="c_slide" id="c_slide">c <input type="button" onclick="move(this.name);" name="d_slide" value="Next Page"> <input type="button" onclick="move(this.name);" name="a_slide" value="top"> </div> <div class="d_slide" id="d_slide">d <input type="button" onclick="move(this.name);" name="a_slide" value="top"> </div> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> function move(to_who) { $('.container').animate({scrollTop: $("."+to_who).offset().top},'slow'); }; </script> </body> </html></code> Quote Link to comment https://forums.phpfreaks.com/topic/291174-jquery-animate-scrolltop-not-always-working/ Share on other sites More sharing options...
njdubois Posted September 21, 2014 Author Share Posted September 21, 2014 Still can't figure this out? Any ideas? Thanks Quote Link to comment https://forums.phpfreaks.com/topic/291174-jquery-animate-scrolltop-not-always-working/#findComment-1491714 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.