logo标签列表

连接不同页面的锚点（href）

htmlanchorhref
8

我有一个带有可用锚点的页面，就像这些：

<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”的链接。
该网站基于bootstrap模板，可能与全屏标题图像有些干扰-我将感谢任何提示如何解决此问题！
我建议你尝试 <a class="nav-link" href="index.html/#ta-services">Leistungen</a>。 - DumbCoder7
9个回答
6

您有大量JS代码导致页面加载延迟。浏览器在初始加载时查找#ta-services，但没有找到，因此停止加载。

您需要使用JS在所有内容加载完成后滚动到位置。可以使用以下类似的JS实现：

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

将以下代码放入JS中，在页面加载完成后运行。如果您还没有类似的代码，可以使用：

document.addEventListener('DOMContentLoaded', function(event) {
  // Scroll into view code here
});
谢谢你的想法 - 我已经尝试过在index.html的末尾（包括调试目的的着色），但没有滚动。 <script type="text/javascript"> document.addEventListener('DOMContentLoaded', function(event) { document.getElementById('ta-services').scrollIntoView({ behavior: 'smooth' }); document.getElementById('ta-services').style.background = '#ff0000'; }); </script> （其次，使用这样的方法，我需要包含更多的逻辑并解析URL; 我正在寻找一种不需要额外JS的本地方式） - Markus Proske
不幸的是，由于网站加载缓慢，您需要使用JS，无法依赖“本地方式”。如果没有看到您的其他JS以及您正在连接到哪些其他事件，我无法告诉您确切的代码放置位置以使其正常工作，但这就是您需要的代码。 - Caleb Anthony
仍在解决这个问题，JS已经启用并触发（颜色编码和显示警报），但是没有滚动。下个周末再试一次。 - Markus Proske
1
我已将您的文件复制到我的本地机器并删除了所有样式表。在那里，页面实际上会滚动到特定的锚点（Leistungen，Kontakt），但仅持续了一小部分时间。它立即滚回到顶部；因此可能还有其他问题... - Bart Barnard
3
基于 Caleb Anthony 的回答：
在页面加载后，您可以使用 JavaScript 滚动到 #ta-services：
document.addEventListener('load', function(event) {
    document.getElementById('ta-services').scrollIntoView({behavior: 'smooth'});
});

在 这里 解释了 load 和 DOMContentLoaded 事件之间的区别：

load 事件在整个页面加载完成后才会触发，包括所有依赖资源（例如样式表和图像）。相比之下，DOMContentLoaded 事件在页面 DOM 加载完成后立即触发，而无需等待资源加载完成。

因此，当触发 DOMContentLoaded 事件时，元素的位置尚未最终确定。
2

@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>
1
最佳实践是在事件定义的第一行中定义event.preventDefault()。 - Farhan
2

原生导航到片段的功能正常。您有一些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') 返回 undefined，因此 scrollTop: NaN = scrollTop: 0

您可以直接删除所有这些代码，它仍然可以正常工作。

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

scrollTop: $this.offset().top - ($("a[href='" + hash + "']").data('offset') || 0)
谢谢你的帮助！ - Markus Proske
1
请添加以下脚本代码并更新“Leistungen”菜单的导航链接的HTML代码。 

$(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>

1

工作正常，但是……

#link的工作正常。浏览器实际上将页面滚动到给定的id处，但立即将文档滚动到顶部。可能是您的一些JS代码将页面滚动到了顶部。

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

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

1

我注意到你使用了jQuery。

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

<script> 
    $('html,body').animate({scrollTop: $(window.location.hash).offset().top});
</script>
1
当我移除了你所有的JS，它就像预期的那样工作。我注释掉了所有的preloaders、scripts、bootstrap等等。大部分人在这里建议的已经在那里完成了，所以我相信你在这方面做得很好。当我们把JS从图片中拿出来时，你的锚链接可以正常工作。
我们知道问题是你正在使用的库/脚本之一，因此我们离问题更近了一步。我们可以逐个删除可能的罪魁祸首（比如你的lazy loaders），逐步缩小问题范围吗？
0
使用锚点的内置滚动功能。

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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接