使用 JS/Ajax 动态获取带有锚点的 URL

Question

我有一个基于锚点的网站。

例如。默认 URL 是 domain.com.

本网站的另一个部分有 URL domain.com/#section1。

还有一个部分有 URL domain.com/#section2。

当我试图获取完整的 URL 网站时，我使用了

window.location.href

但是当我向下滚动页面时 URL 变为 domain.com/#section1 我的 window.location.href 没有改变。

我的 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");
    }

如何使用 JS 动态获取 URL 右锚？

Answer 1

您可以使用 window.location.hash 只获取散列标签：

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

更新

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

更新二

滚动时需要更改散列。示例：

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

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

在调用的函数上，您现在可以检查哈希是什么：

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

使用 JS/Ajax 动态获取带有锚点的 URL

Dynamically get URL with anchors using JS/Ajax

javascript

jquery

ajax

anchor

window.location