将锚链接到不同的页面 (href)

Question

我有一个页面，上面有这样的工作锚：

<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”的链接。

该网站基于引导程序模板，它可能会对全屏标题图像造成一些干扰 - 我很感激任何解决问题的提示！

Answer 1

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

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

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

将它放在您的 JS 中以在页面加载后运行。如果你还没有这样的东西，你可以使用：

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

Answer 2

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

在assets/js/theme.js周围线702：

  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)