javascript-生成的锚标签在跳转到同一页面上的锚标签时不可见

Question

对于在 HTML 服务器端插入锚标签的网页，我可以通过手动更改 URL 末尾的哈希标签来跳转到每个锚标签地址栏或同一页面上的可点击链接 (<a href="#mytag">gotomytag</a>) 无需重新加载页面即可将我带到本地锚点。

我注意到如果页面上的锚标记是使用 JavaScript 生成的，这将不起作用。除非我做错了什么，否则我将得出结论，JavaScript 生成的哈希标签对于 URL 中包含的锚标签的导航是不可见的。

为了让事情更清楚，下面是不起作用的序列：

导航到我的站点。com/mypage.php
JavaScript 就在 </body> 标签添加我的锚标签之前 (<a name="here"></a>)
我把地址栏里的URL改成"mysite.com/mypage.php#here"
我希望浏览器导航到标签。但事实并非如此。没有任何反应，就好像标签不存在一样。如果我在服务器端包含在步骤 2 中添加的锚标记，那么此步骤将按预期导航到锚。

此外，我正在使用以下代码片段创建我已确认使用内置 chrome 调试器可以正常工作的元素：

`var ael = document.createElement('a');
ael.setAttribute('name','here');
someelementinmyhtmldom.appendChild(ael);`

我希望这里有人可以让我直截了当或确认我的发现并提出解决方法。

我在 Chrome 版本 55.0.2883.87 Windows 7.

谢谢。

编辑：我的初始代码不起作用的原因：我的问题的答案在下面的 post 中给出，但如果您对为什么我的代码不起作用感兴趣：我了解到您无法导航到被其他元素隐藏的锚标记！我将我的锚元素放置在它应该在的位置上方约 50px（使用绝对位置）以补偿顶部的粘性菜单栏并且由于其 overflow:hidden 属性而使我的锚消失含元素。解决方案：确保你的锚点没有被其他元素覆盖，或者因为移动到溢出被隐藏的元素之外。

Answer 1

滚动到目标锚点（或任何 #target）将仅限于页面上的内容。如果您试图滚动到页面底部，浏览器只能滚动到此为止（即页面底部不能滚动到 window 的顶部，除非 window高度很小）。它完全有可能工作得很好，但您的滚动位置无法到达。

从 table 中删除它，使用 id 而不是 name（如@DavidThomas 在评论中所述）以获得最佳兼容性。

最后，因为您现在可以使用 id，您的目标不再局限于 hyperlinks。与其创建你可以 link 的空锚元素，这只会使 DOM 混乱，不如选择 DOM 中的现有元素并使用它。

排除这些问题，以下代码在文档的第一段创建一个 id，底部的硬编码 link 可以滚动到该段落。

举个例子，请注意我还在顶部硬编码了一个 "go to bottom" link，当你点击它时，你不会看到底部一直滚动到顶部。

如果您使用 document.createElement() 创建新元素并使用 setAttribute 设置元素的属性，应该没有问题。

var thePs = document.querySelectorAll("p");

// Update the first paragraph to have the id that will serve as the target:
thePs[0].setAttribute("id", "top");

p:last-of-type{
  background:yellow;
}

<p><a href="#bottom">Go to bottom</a>This is a test. This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.</p>

<p>This is a test. This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.</p>

<p>This is a test. This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.</p>

<p>This is a test. This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.</p>

<p>This is a test. This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.</p>

<p>This is a test. This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.</p>

<p>This is a test. This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.</p>

<p>This is a test. This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.</p>

<p><a href="#top">Back to Top</a></p>
<p id="bottom">This is the bottom. I'll never be scrollable to the top of the browser window unless the window's height is very small.</p>

javascript-生成的锚标签在跳转到同一页面上的锚标签时不可见

javascript-generated anchor tags are not visible when jumping to anchor tags on the same page

html

javascript

url

anchor

hashtag