CODEWITHSUNDEEP
javascriptjquerycross-browsercompatibility
George Smith
George Smith

Reputation: 505

jQuery - After refreshing the page doesn't work

At the moment, I am learning how to write in javascript and jquery. However, I wrote a simple jquery code where when you enter the page/website it automatically scrolls to a specific div. The script is working fine when I am loading the page/website and automatically scrolls to the div I want. The problem is coming when I am refreshing the browser. After the refreshed page the script doesn't want to scroll to the div I pointed in the code. If someone could help me I will be really grateful and thank you in advance.

On Chrome and Opera the script is working even after the refresh is made. However, I cannot say the same for Firefox, IE and Edge.

$(document).ready(function() {
    $(".Left_Container").animate({
       scrollTop: $(".Home_Left").offset().top
    }, 0);
});

PS: I am using "Left_Container" instead of "HTML,body" because I want only to scroll in that particular div.

Best regards,

George S.

Upvotes: 0

Views: 528

Answers (1)

Ricardo Maturi
Ricardo Maturi

Reputation: 116

Some browsers will save your scroll position after page reloads so it's not a problem of your code.

What you can do is just force the browser to instantly scroll to top and then animate to your div like this:

$(document).ready(function() {
    $(".Left_Container").scrollTop(0); // go to the top instantly (no animation)
    $(".Left_Container").animate({ // then animate down
       scrollTop: $(".Home_Left").offset().top
    }, 0);
});

Upvotes: 3

Related Questions