自动生成的 ID 的哈希值在页面加载时不起作用

Question

在当前的项目中，我有不同的文章包含不同的标题 (<h3>)。因为文章是在 CMS 中组成的，所以我们不能从一开始就设置 <h3> 元素的 id。这就是为什么我在页面加载时设置它们：

$(document).ready(function(){
  
  let articleContent = $(".article-body")
  let headings = articleContent.find("h3")

  headings.each(function() {
    $(this).attr("id", $(this).first().text().replace(/\s/g, "-"))
  }
}

问题是，当我尝试打开 URL 并将给定的标题 ID 作为其散列以将用户导航到正确的标题（例如 https://test.com/article-122321#heading2）时，这是不工作。我猜是这种情况，因为在页面加载时标题没有设置任何 ID，浏览器不知道导航到哪里。

你能帮忙解决这个问题吗？我是否必须在另一个时间点设置 ID，或者我是否需要一些自定义 Javascript 代码来告诉浏览器导航到标题？

谢谢！

Answer 1

试试这个

$(document).ready(function() {
  $(".article-body h3").each(function() {
    $(this).attr("id", $(this).first().text().replace(/\s/g, "-"))
  })
  const hash = location.hash;
  const $element = hash ? $(hash) || null; // assuming a valid selector in the hash
  if ($element) $element[0].scrollIntoView({ // use the DOM method
    behavior: "smooth", // or "auto" or "instant"
    block: "start" // or "end"
  });
});

自动生成的 ID 的哈希值在页面加载时不起作用

hash for auto generated ids not working on page load

html

javascript

anchor

jquery