jQuery scrollTop is laggy

Question

I have a site where the top of the page is a image slider (slick) which is 100% width and 100% height of the frame. I also have a "scroll down"-button which is using jQuery to scroll the page one frame down.

This animation is quite laggy and I wonder if there might be possible that this animation is getting intefered by the slick-animation.

So I have this jQuery code:

if(!$('#isMobile').is(":visible")) {
    $('#slideshow-wrapper').slick({
        infinite: true,
        fade: true,
        autoplay: true,
        pauseOnHover: false,
        arrows: false,
        autoplaySpeed: 5000,
        mobileFirst: true
    });
}

$('#scrollDown a').click(function(e){
    e.preventDefault();
    $('body,html').animate({ scrollTop: $(window).height()});
    return 0;
});

Is there some obvious problem about the lag in my code?

Answer 1

You could use something like this:

$('button').click(function (e) {
    e.preventDefault();
    var transforms = getTransforms('translate3d(0px, -' + $(window).height() + 'px, 0px)')
    $('body,html').css(transforms);
});

//taken from fullPage.js 
//@see https://github.com/alvarotrigo/fullPage.js
function getTransforms(translate3d) {
    return {
        '-webkit-transform': translate3d,
            '-moz-transform': translate3d,
            '-ms-transform': translate3d,
            'transform': translate3d
    };
}

With the following CSS to create the transition:

html,body{
   -webkit-transition: transform 900ms ease;
   transition: transform 900ms ease;
}

Demo online

Just remember that this won't work in browsers without CSS3 support. A fallback to jQuery would be the right solution for it. But if you just care about modern browsers, then its fine with just this.

If you are planning to create a full screen website, I would recommend you to try fullPage.js directly, it can save you a lot of time.