CODEWITHSUNDEEP
jqueryhash
Dirty Bird Design
Dirty Bird Design

Reputation: 5533

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

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);
    }
});

Upvotes: 0

Views: 551

Answers (1)

user7110739
user7110739

Reputation: 

   $(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

Upvotes: 2

Related Questions