Using hash in url to display content, but do not scroll to anchor on page load

Question

I have a page with some tabs. I created links with a hash to load that tab's content automatically. All works fine in that regard, but each time I use the hash URL it loads the correct content, but loads the page at the top of the content it loaded, not the top of the page. I want to disable this, but keep the correct content loading. ScrollTop doesn't seem to do anything.

$(function(){
    var Div1 = $('#Div1');
    var Div2 = $('#Div2');
    var Div3 = $('#Div3');

    if (location.hash === "#Show_Div1") {
        $(Div1).removeClass('is-visuallyhidden').siblings().addClass('is-visuallyhidden');
        $(this).scrollTop(0);
    } else if (location.hash === "#Show_Div2"){
        $(Div2).removeClass('is-visuallyhidden').siblings().addClass('is-visuallyhidden');
        $(this).scrollTop(0);
    } else if (location.hash === "#Show_Div3"){
        $(Div3).removeClass('is-visuallyhidden').siblings().addClass('is-visuallyhidden');
        $(this).scrollTop(0);
    }
});

Please create a working example (jsfiddle/snippet) – Dekel Sep 08 '17 at 19:14 — Dekel, Sep 08 '17 at 19:14
Can't you just use an anchor that is not on the page? – Karl-André Gagnon Sep 08 '17 at 19:16 — Karl-André Gagnon, Sep 08 '17 at 19:16

score 2 · Accepted Answer · answered Sep 08 '17 at 19:18

   $(function() {
    var Div1 = $('#Div1');
    var Div2 = $('#Div2');
    var Div3 = $('#Div3');

    if (location.hash === "#Show_Div1") {
        setTimeout(function() {
            window.scrollTo(0, 0);
            $(Div1).removeClass('is-visuallyhidden').siblings().addClass('is-visuallyhidden');
        }, 1);

    } else if (location.hash === "#Show_Div2") {
        setTimeout(function() {
            window.scrollTo(0, 0);
            $(Div2).removeClass('is-visuallyhidden').siblings().addClass('is-visuallyhidden');
        }, 1);

    } else if (location.hash === "#Show_Div3") {
        setTimeout(function() {
            window.scrollTo(0, 0);
            $(Div3).removeClass('is-visuallyhidden').siblings().addClass('is-visuallyhidden');
        }, 1);

    }
});

According what i understand Hope this helps!!!

for more detail vistit how to disable anchor jump when loading a page

Good solution, thank you. There was a comment on the link that you provided that I ended up using to avoid any page jump with the scrollTo(0,0) function. Thanks! — Dirty Bird Design, Sep 08 '17 at 19:39

Using hash in url to display content, but do not scroll to anchor on page load

1 Answers1