【问题标题】：Link with anchor to different page (href)用锚链接到不同的页面（href）
【发布时间】：2020-04-29 13:31:39
【问题描述】：

我有一个带有 工作锚 的页面，如下所示：

<a class="nav-link" href="#ta-services">Leistungen</a>
...
<section class="border-top" id="ta-services">

在另一个页面上，我想链接到相同锚点位置的第一页。据我了解，使用纯 html 应该可以做到这一点：

<a class="nav-link" href="index.html#ta-services">Leistungen</a>

但是，该链接就像指向 index.html 的普通链接一样工作，页面不会向下滚动。在线示例http://elisabethzenz.at/impressum_datenschutz.html。右上角的链接名为“Leistungen”。

该网站基于引导模板，它可能会干扰全屏标题图像 - 我将不胜感激任何提示如何解决这个问题！

【问题讨论】：

- 我建议你试试<a class="nav-link" href="index.html/#ta-services">Leistungen</a>

标签： html anchor href

【解决方案1】：

您有大量的 JS 会延迟页面的加载。浏览器在初始加载时查找 #ta-services 并没有看到它，因此它停止了。

所有内容加载完成后，您需要使用 JS 滚动到该位置。你可以用一些看起来像这样的 JS 来做到这一点：

document.getElementById('id').scrollIntoView({
  behavior: 'smooth'
});

把它放在你的 JS 中，以便在页面加载后运行。如果你还没有类似的东西，你可以使用：

document.addEventListener('DOMContentLoaded', function(event) {
  // Scroll into view code here
});

【讨论】：

感谢您的想法 - 我已经在 index.html 的末尾尝试过（包括用于调试目的的着色），也没有滚动。（其次，使用这样的方法，我需要包含更多逻辑并解析 url；我正在寻找一种无需额外 JS 的原生方式）
不幸的是，由于网站加载缓慢，您需要使用JS，您不能依赖“原生方式”。在没有看到你的 JS 的其余部分以及你正在挂钩的其他事件的情况下，我无法准确地告诉你在哪里放置这段代码以使其工作，但这就是你需要的代码。
仍在处理该问题； JS 处于活动状态并被触发（颜色编码并显示警报）但没有滚动。下周末再试。
我已将您的文件复制到我的本地计算机并删除了所有样式表。在那里，页面实际上确实滚动到了特定的锚点（Leistungen，*Kontakt），但只滚动了几分之一秒。它立即滚动回到顶部；所以可能还有其他事情发生......

【解决方案2】：

根据 Caleb Anthony 的回答：

您可以在页面加载后使用 JavaScript 滚动到 #ta-services：

document.addEventListener('load', function(event) {
    document.getElementById('ta-services').scrollIntoView({behavior: 'smooth'});
});

load 和DOMContentLoaded 事件之间的区别解释为here 为

load 事件在整个页面加载后触发，包括所有相关资源，例如样式表和图像。这与 DOMContentLoaded 不同，后者在页面 DOM 加载后立即触发，无需等待资源完成加载。

因此，当DOMContentLoaded 事件触发时，元素的位置不是最终的。

【讨论】：

【解决方案3】：

片段的本机导航正常工作。当 URL 包含哈希组件时，您有一些 JavaScript 会将页面滚动到顶部。

在assets/js/theme.js702 附近：

  var hash = window.location.hash;

  if (hash && document.getElementById(hash.slice(1))) {
    var $this = $(hash);
    $('html, body').animate({
      scrollTop: $this.offset().top - $("a[href='" + hash + "']").data('offset')
    }, 400, 'swing', function () {
      window.history.pushState ? window.history.pushState(null, null, hash) : window.location.hash = hash;
    });
  }

$("a[href='" + hash + "']").data('offset') 返回未定义，所以scrollTop: NaN = scrollTop: 0

您可以删除所有这些代码，它会起作用。

或者确保该操作不返回 NaN：

scrollTop: $this.offset().top - ($("a[href='" + hash + "']").data('offset') || 0)

【讨论】：

感谢您的帮助！

【解决方案4】：

@Markus Proske 下面的脚本将为您提供帮助。 导航栏脚本 从另一个页面跳转到相应部分

这里我定义了导航脚本。

$('.nav-link').on('click', function (event) {
    var $anchor = $(this);
     $('html, body').stop().animate({
      scrollTop: $($anchor.attr('href')).offset().top
     }, 1500, 'easeInOutExpo');
     event.preventDefault();
});

例如，这里我给出了导航结构，即，

 <!-- Homepage "index.html"--> 
  <nav id="menu">
    <ul id="menu-main-menu" class="menu menu-main">
      <li class="nav-link"> <a href="#home"><span>Home</span></a> </li> <!-- index.html -->      
      <li class="nav-link"> <a href="about-us.html"><span>About Us</span></a> </li> <!-- separate page -->
      <li class="nav-link"> <a href="#contact"><span>Contact Us</span></a> </li>            
    </ul>
  </nav>

  <!-- Homepage has below sections "index.html"-->
  <section id="home"></section>
  <section id="contact"></section>


 <!-- About-Us Page -->
  <nav id="menu">
    <ul id="menu-main-menu" class="menu menu-main">
      <li class="nav-link"> <a href="index.html#home"><span>Home</span></a> </li> <!-- index.html -->      
      <li class="nav-link"> <a href="about-us.html"><span>About Us</span></a> </li>            
      <li class="nav-link"> <a href="index.html#contact"><span>Contact Us</span></a> </li>
    </ul>
  </nav>

【讨论】：

在事件定义的第一行定义 event.preventDefault() 是很好的做法。

【解决方案5】：

添加以下脚本代码并更新“Leistungen”菜单导航链接的html代码

$(document).on('click',"#goto-services",function(e) {
    e.preventDefault();
    $('html, body').animate({
        scrollTop: $("#ta-services").offset().top
    }, 'slow');
});

&lt;a class="nav-link" href="#ta-services" id="goto-services"&gt;Leistungen&lt;/a&gt;

【讨论】：

【解决方案6】：

它按预期工作，但是...

#link 按预期工作。浏览器实际上正在将页面滚动到给定的 id，但会立即将文档滚动到顶部。可能是您的某些 JS 代码将您的页面滚动到顶部。

如果您打开此页面并密切关注滚动条，您就会注意到滚动条的行为。它首先滚动到给定的 id，即#ta-services，同时将滚动条移到顶部。

您需要找出导致此问题的 JS 代码。

【讨论】：

【解决方案7】：

我注意到你有 jQuery。

您可以在 body 标记关闭之前添加此代码 sn-p。

<script> 
    $('html,body').animate({scrollTop: $(window.location.hash).offset().top});
</script>

【讨论】：

【解决方案8】：

当我删除你的所有 JS 时，它按预期工作。我注释掉了你所有的预加载器、脚本、引导程序等。人们在这里建议的大部分内容已经在那里完成了，所以我相信你在这方面做得很好。当我们将 JS 从图片中删除时，您的锚链接有效。

我们知道问题在于您正在使用的库/脚本之一，所以这更接近了一步。

我们能否通过一次移除一个可能的罪魁祸首（比如你的懒加载器？）来依次开始深入研究问题？

【讨论】：

【解决方案9】：

使用锚点的内置滚动功能。

page1.html

<a href="page2.html#Anchorname">go to page 2</a>
<a name="Anchorname"></a>

page2.html

<a href="page1.html#Anchorname">goto page 1</a>
<a name="Anchorname"></a>

【讨论】：