代码之家  ›  专栏  ›  技术社区  ›  GeniusboyWonder

锚定链接到同一站点上的另一个页面

  •  0
  • GeniusboyWonder  · 技术社区  · 7 年前

    我在这个网站上浏览了很多次,都没有发现哪里出了问题。我需要从图库页面链接到索引页面,但到该页面中的特定锚点。

    我的索引标题

    <!-- Container (About Section) -->
    <div id="about" class="container-fluid">
    </div>
    
    <!-- Container (Services Section) -->
    <div id="portfolio" class="container-fluid text-center">
    </div>
    

    下面是图库页面上的链接。

    <div class="collapse navbar-collapse" id="myNavbar">
    <ul class="nav navbar-nav navbar-right">
    <li><a href="/index.html">ABOUT</a></li>
    <li><a href="/gallery.html">GALLERY</a></li>
    <li><a href="/index.html#portfolio">PORTFOLIO</a></li>
    <li><a href="store/index.php">STORE</a></li>
    <li><a href="/index.html#ordering">ORDERING</a></li>
    <li><a href="/index.html#contact">CONTACT</a></li>
    
    3 回复  |  直到 7 年前
        1
  •  0
  •   DarkBee    7 年前

    由于javascript,您无法在页面中导航。

    $(".navbar a, footer a[href='#myPage']").on('click', function(event) {
        var hash = this.hash;
        if (hash == '' || $(hash).length == 0) return true;
    
        event.preventDefault();
        $('html, body').animate({
            scrollTop: $(hash).offset().top
        }, 900, function(){
            window.location.hash = hash;
        });
    });
    
        2
  •  0
  •   Juan Miguel S.    7 年前

    看看你的网站,你已经在你的 navbar 为了在您单击导航栏上的定位点到所选部分时进行滚动转换。此代码。

    $(document).ready(function(){
    // Add smooth scrolling to all links in navbar + footer link
        $(".navbar a, footer a[href='#myPage']").on('click', function(event) {
        // Make sure this.hash has a value before overriding default behavior
        if (this.hash !== "") {
            // Prevent default anchor click behavior
            event.preventDefault();
            ....
    

    在这里,您可以避免在锚点上单击时的标准浏览器行为,哈希与 "" ,这样就避免了当你点击图库页面进入主页时重定向到你的主页。您应该修改此代码,以检查目标页面是否与当前页面相同,或者是否需要转到其他页面。

        3
  •  -1
  •   T.DT    7 年前

    尝试使用反斜杠,或复制完整路径。不过,我不知道如何使用#。