Qfyilyi

I use this script to scroll down to a certain anchor when page is loaded:

$(document).ready(function () {

    // Handler for .ready() called.

    $('html, body').animate({

        scrollTop: $('#myanchor').offset().top

    }, 100);

});

Anyway, before this #myanchor there are 2 sections containing 2 different owl-carousel. The scroll goes to the wrong position when page loads. It goes aproximately over the secon owl-carousel.

I suppose that it's caused by a wrong calculation of the window height because at the first moment the carousel are loaded have an height equal to 0. I just suppose that.
I don't want to assign a minimum or fixed height to those section. So, there's a solution? Maybe a little delay in scroll down? Could someone suggest me the code that could help me solve this issue?

Thanks so much in advance!

The best option would be to add an event listener for the images to finish loading. But we developers have timelines to get stuff done. So, just use a timeout to give the carousel time to load. In most cases, users need time to absorb your content so you have a few seconds before they click on anything.

$(document).ready(function () {

    // Handler for .ready() called.



    setTimeout( function() {

        $('html, body').animate({

            scrollTop: $('#myanchor').offset().top

        }, 100);

    }, 3500);

});