Link 锚定到不同的页面 (href)

Question

我有一个页面 工作锚点 像这样：

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

在另一页上，我想 link 到同一锚点位置的第一页。据我了解，这应该可以用普通的 html:

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

但是，link 的工作方式与正常的 link 到 index.html 一样，页面不会向下滚动。 http://elisabethzenz.at/impressum_datenschutz.html 在线示例。 Link在右上角命名为"Leistungen".

该网站基于 bootstrap 模板，全屏 header 图像可能会受到一些干扰 – 我将不胜感激如何解决该问题的任何提示！

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

添加以下脚本代码并更新 html 导航代码 link 用于 "Leistungen" 菜单

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

<a class="nav-link" href="#ta-services" id="goto-services">Leistungen</a>

Answer 3

基于Caleb Anthony的回答：

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

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

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

The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images. This is in contrast to DOMContentLoaded, which is fired as soon as the page DOM has been loaded, without waiting for resources to finish loading.

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

Answer 4

它按预期工作但是...

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

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

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

Answer 5

@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>

Answer 6

我注意到你有 jQuery.

您可以在 body 标签关闭之前添加此代码段。

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

Answer 7

片段的本机导航工作正常。当 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') return未定义，所以 scrollTop: NaN = scrollTop: 0

您只需删除所有这些代码，它就会起作用。

或者确保操作不 return NaN:

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

Answer 8

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

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>

Answer 9

当我删除了您的所有 JS 后，它按预期工作。我注释掉了你所有的预加载器、脚本、bootstrap 等。人们在这里建议的大部分内容已经在那里完成，所以我相信你在这方面做得很好。当我们将 JS 排除在图片之外时，您的锚点 link 会起作用。

我们知道问题出在您正在使用的 libraries/scripts 之一，所以这更近了一步。

我们能否通过一次一个地移除可能的罪魁祸首（例如您的惰性加载器？）来开始深入研究问题？

Link 锚定到不同的页面 (href)

Link with anchor to different page (href)

html

anchor

href

它按预期工作但是...