Javascript 与 html 锚点冲突

Question

我目前正在创建一个 website，它具有固定的页眉和页脚。为了减少代码重复，我使用 jquery 在加载每个不同的页面时加载 header.html 和 footer.html。

使用此页眉和页脚的每个 html 页面都使用以下代码加载。

<!-- Header and footer loading -->
<script> 
  $(function() {
    $("#header").load("header.html"); 
    $("#footer").load("footer.html");
  });
</script>

<div id="header">
  (header.html content rendered here)
</div>

解释下一部分的最佳方式是访问我link编辑的网站。我想要做的是让下拉按钮将用户从网站上的任何其他页面带到设备页面的特定部分。如您目前所见，此功能仅在用户已经在设备页面上时才有效。

从我读过的所有内容来看，跨页锚点的设置方式应与页内锚点相同。使用 <a href="equipment.html#anchorname></a> 然后 link 到 <a id="anchorname></a> 的页面。但是，这种方法仅在用户与锚点位于同一页面上时才有效。我很确定这是由于锚机制的时间和 jQuery 代码运行的时间。

我的两个问题是...

有人可以解释导致我的锚无法工作的事件顺序。
我需要做什么才能使我的跨站点锚点正常工作？

谢谢，如果您需要特定的代码片段或有任何问题，请告诉我。

Answer 1

它可能对你有帮助

读取 url 并在页面加载完成后拆分散列标签上的 url 调用以下方法....

function scrollTo(hash) {
    location.hash = "#" + hash;
}

Answer 2

您的跨页锚完全按预期工作。考虑禁用 JavaScript 的基本 HTML 页面：

然后 #gradalls 或 #trucks 将 "scroll" 立即指向相应的锚点。我说 "scroll" 是因为没有足够的内容可以滚动到任何地方 - 页面将停在那里，静止不动。

接下来，您的一系列 jQuery 加载事件将像这样触发：

$(function() {
  $("#header").load("header.html"); 
  $("#footer").load("footer.html");
  $("#xl4100-99").load("xl4100_99.html");
  $("#xl4200-95").load("xl4200_95.html");
  $("#lowboy-93").load("lowboy_93.html");
  $("#gmctruck-93").load("gmctruck_93.html");
});

它们将填充您页面中的各种容器，内容会向下增长，但是页面不会滚动。已经发生了。

解决方案 1

最好的解决方案，也是 SEO 友好的解决方案，就是简单地将内容包含在每个页面中，而不是动态加载它。事实上，除了关键字之外， search engine simulator只会看到

Dave Ankney Gradall Equipment Gradalls Trailers Trucks

并且没有任何链接。然后它可能会消失很长时间，因为那里什么都没有 juicy。由于您使用的是 S3，因此您必须手动将内容包含在每个页面中。

解决方案 2

要么，要么使用像 PHP 这样的合适的服务器后端，在这种情况下，您可以只包含 HTML 的每个部分，如下所示：

<body>
  <div class="main">
    <div id="header"><?php include("header.php"); ?>
    </div>

(仅将header.html重命名为header.php)

解决方案 3

如果你真的只是想让跳转工作，你可以像这样改变你的 JS：

<!-- Header and footer loading -->
<script>
$(function() {
  // Create Deferred instances that can be handed to $.when()
  var d1 = $.Deferred();
  var d2 = $.Deferred();
  // var d3 = 
  // var d4 = 

  // Set up a chain of events
  $.when(d1, d2).then(function() {
    // When everything has loaded, jump to the fragment
    var hash = window.location.hash
    if (hash !== "") {
      window.location.hash = hash;
    }
  });

  // Perform the load calls
  $("#header").load("header.html", function() { d1.resolve(); });
  $("#footer").load("footer.html", function() { d2.resolve(); });
  // ...
});
</script>

希望这就是您要找的。

Javascript 与 html 锚点冲突

Javascript conflicting with html anchor

html

javascript

anchor

jquery

解决方案 1

解决方案 2

解决方案 3