html - 用 anchor 链接到其他页面(href)

Question

我有一个包含工作 anchor 的页面，如下所示:

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

在另一页上，我想在同一 anchor 位置链接到第一页。以我的理解，纯HTML应该可以实现:

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

但是，该链接的工作方式类似于指向index.html的普通链接，该页面不会向下滚动。网上示例 http://elisabethzenz.at/impressum_datenschutz.html。右上角的链接名为“Leistungen”。

该网站基于 bootstrap 模板，可能会对全屏标题图像造成一些干扰–对于解决该问题的任何提示，我将不胜感激!

Answer 1

片段的 native 导航正常工作。您有一些JavaScript，可在URL具有哈希部分时将页面滚动到顶部。

在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)