代码之家  ›  专栏  ›  技术社区  ›  Andrii Pryimak

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

  •  1
  • Andrii Pryimak  · 技术社区  · 7 年前

    我有一个基于锚的网站。

    例如,默认URL为 domain.com

    该网站的另一部分有URL domain.com/#section1

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

    当我试图获取webiste的完整URL时,我使用了

    窗地方href

    领域com/#第1节 我的 window.location.href

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

    1 回复  |  直到 7 年前
        1
  •  2
  •   P. Frank    7 年前

    你可以用 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);
    }
    

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