使用JS / Ajax通过锚动态获取URL

Question

I have a website that based on anchors.

For ex. the default URL is domain.com .

Another section of this website has the URL domain.com/#section1 .

One more section has the URL domain.com/#section2 .

When I tried to get the full URL of webiste I used

window.location.href

but when I scroll down my page and the URL changed to domain.com/#section1 my window.location.href didn't change.

My JS:

$anchor = window.location.hash;

    if($anchor == "#kraftwerk-82"){
        $(".starting-logo.default-logo").attr("src","/logo_main.png");
        $(".starting-logo.default-logo").attr("srcset","/logo_main.png 1x, /retina_logo.png 2x");
    }else{
        $(".starting-logo.default-logo").attr("src","/logo_main_white.png");
        $(".starting-logo.default-logo").attr("srcset","/logo_main_white.png 1x, /retina_logo_white.png 2x");
    }

How can I dynamically get the URL with right anchor using JS?

Answer 1

You can use window.location.hash for get only the hash tag:

yourHash = window.location.hash.substring(1)

UPDATE

if(window.location.hash){
    console.log(window.location.href + window.location.hash);
}else{
    console.log(window.location.href);
}

UPDATE II

When you scroll you need to change the hash. example:

var anchor_top = $('a[href="#kraftwerk-82"]').offset().top;

$(window).on('scroll', function() {
    if ( $(window).scrollTop() > anchor_top ) {
        window.location.hash = '#kraftwerk-82';
    }
});

And on function called you can check what is the hash now:

Function track(){
    $anchor = window.location.hash;
    if($anchor == "#kraftwerk-82"){
        $(".starting-logo.default-logo").attr("src","/logo_main.png");
        $(".starting-logo.default-logo").attr("srcset","/logo_main.png 1x, /retina_logo.png 2x");
    }else{
        $(".starting-logo.default-logo").attr("src","/logo_main_white.png");
        $(".starting-logo.default-logo").attr("srcset","/logo_main_white.png 1x, /retina_logo_white.png 2x");
    }
}