使用JS / Ajax动态获取带锚点的URL(Dynamically get URL with anchors using JS/Ajax)

使用JS / Ajax动态获取带锚点的URL(Dynamically get URL with anchors using JS/Ajax)

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

对于前者 默认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？

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?

最满意答案

您可以使用window.location.hash仅获取哈希标记：

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

更新II

滚动时需要更改哈希值。 例：

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

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