Disable scrollTop at the top of last div instead of bottom

Question

Hi I have what I believe to be a complicated issue and I'm hoping someone can help.

I have a long page with scrolling animations. There is a play button to start autoscrolling the page. I have the autoscrolling working fine with a 30 second duration (this number is important for making it work correctly). The issue that I am having is that this site is using background images and is responsive. I'm using div:after {padding-top: 56.25%} to keep the 16:9 aspect ratio. So when the autoscroll gets to the last frame it scrolls to the bottom regardless of the window size. I need it to stop scrolling when it gets the top of the last frame instead of the bottom. Is there anyone that knows of a way to do this using this method:

$(".playBtn").click(function(){
            $("body").animate({ scrollTop: $(document).height() }, 30000);
        });

Please note: scrolling the height of the entire document with the duration is key to making this work.

I've been pulling my hair out for days trying to perfect this autoscrolling garbage (I thought the experience would be better if the user scrolled manually but the client insisted on autoscroll). So thanks a bunch in advance if you can help with this!

score 1 · Answer 1 · answered Mar 14 '14 at 16:14

you can use .stop to stop animations..

please see this fiddle: http://jsfiddle.net/jFIT/tmnXs/

$(window).scroll(function () {
 if ($(window).scrollTop() > 10000) {
     $(':animated').stop();
 }
 $("#fixedstatus").html($(window).scrollTop());
});
$("#autoscroll").click(function () {
 $("body").animate({
     scrollTop: $(document).height()
 }, 30000);
});

this will stop the animation when the top of the page is 10000.. adjust to whatever the position is that you would like to stop at.

Disable scrollTop at the top of last div instead of bottom

1 Answers1