CODEWITHSUNDEEP
javascriptjquery
Chris Weiss
Chris Weiss

Reputation: 73

jump sections before starting scrolltop animation

I am attempting to use skrollr and jquery to create a sidescrolling choose-your-own adventure type thing. With my microscopic skills in javascript (trying to improve it) I have managed to work things out except for one thing.

I am animating scrolltop to make the sections play, however, I want to be able to jump sections before playing. since skrollr "plays" everything sequentially, then scolltop naturally wants to "play" everything in between where you are and the "target". I would like to know how to tell scrolltop to check where it is, compare this to the target, and if sections are in between to skip them before it starts the scroll animation.

I guess this is mainly a jquery question. To give you an idea, im using simple jquery like:

$('#chapter4a').on('click', function() {
        $('html, body').animate({ scrollTop: 2750 }, 5000);

      });

what if I am at 0, want it to animate to 200 over 500ms, then skip to 2000 and animate to 2700 over another 1000ms. What would that logic look like?

Thanks in advance.

Upvotes: 0

Views: 179

Answers (1)

Sergio
Sergio

Reputation: 28845

jQuery allows you to have different easing in the animations. Maybe worth to take a look at it, it might have what you need and then you don't need to code so much.

But, to answer you question, this should work:

$('#chapter4a').on('click', function() {
        $('html, body').animate({ scrollTop: 200}, 500,function() {
            $('#chapter4a').scrollTop(2000);
            $('html, body').animate({ scrollTop: 2700}, 1000); 
        });
});

Upvotes: 1

Related Questions