JQuery animation doesn't scroll to correct location location during page load

user_16487022 0
Viewed 42

I have a button which scroll to a "target" div when pressed. The button and the target div are being injected as an external widget to the site. the function of the button:

scrollToElement = function() {
jQuery([document.documentElement, document.body]).animate({
scrollTop: jQuery(".targetElementClass").offset().top - 10
}, 1000);
//other code
}

It seems that when page load the first press on the button scroll to a different location of the page.this only happen during the page load as it seem there is some kind of race condition between the scroll top calculation and the actual location of the "target" div during the load.

I thought of "stop(true,true).animate(......)" but as I read from the documentation it can stop other animation on the page so I think it may interfere with the customer site functionality and I ruled that out (please let me know if I'm wrong).

Do I have another option except the stop function to try and counter this issue? Also I wonder if that behavior can be caused by other code performing "jQuery().stop()" and is there some kind way of resolving such collision?

css html jquery javascript
2 Answers

I have a small scrollFunction that I think works well and it is pretty dynamic. You just simply create a button and in the onclick parentheses add your target id/class. First you need a button in your .html file that looks like this:

<button type="button" onclick="scrollFunction(putYourTargetDivHere)">This is a button</button>

Then in your javascript/jquery file use this:

    function scrollFunction(target) {
            $('html,body').animate({
                scrollTop: $(target).offset().top
            },
                'slow');   
}

And if you want to run the function when the page loads you can use this:

window.onload = function() {
  scrollFunction(YourTargetDivHere);
};

Best regards Max

user_126283760

It seems like my intuition was correct and some element which was loaded after my widget was stopping the scrolling animation , after adding additional animate on "complete" and "fail" function of the animation the scrolling now reach the correct location (though it is a little bit sluggish).

   window.scrollToElement = function() {
    jQuery([document.documentElement, document.body]).animate({
            scrollTop: jQuery(".targetelementClass").offset().top - 10
    }, {
  duration: 1000,
  queue: false,
  complete: function(){
             jQuery([document.documentElement, document.body]).animate({
            scrollTop: jQuery(".targetelementClass").offset().top - 10
             }, {
                      duration: 500,
                      queue: false});
        },
  fail: function(){
             jQuery([document.documentElement, document.body]).animate({
            scrollTop: jQuery(".targetelementClass").offset().top - 10
             }, {
                      duration: 500,
                      queue: false});
        }
});
    // other code
}

The result is that on failure or if something mark the animation as complete before actual completion another animation is being made. It is not perfect as the scroll seem to be lagging sometimes and I assume more tweaking are needed.

user_164870220
Related