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> 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 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
Archived
This topic is now archived and is closed to further replies.