跳转到同一页面上的锚标记时，javascript 生成的锚标记不可见

Question

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

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

为了让事情更清楚，这里的顺序不起作用：

1. 导航到 mysite.com/mypage.php

2. </body> 标签之前的 JavaScript 添加了我的锚标签 (<a name="here"></a>)

3. 我把地址栏中的URL改成“mysite.com/mypage.php#here”

4. 我希望浏览器导航到标签。但事实并非如此。没有任何事情发生，就好像标签不存在一样。如果我在服务器端包含步骤 2 中添加的锚标记，则此步骤将按预期导航到锚。

另外，我正在使用以下 sn-p 创建我已确认使用内置 chrome 调试器正常工作的元素：

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

我希望这里有人可以纠正我或确认我的发现并提出解决方法。

我在 Windows 7 上使用 Chrome 版本 55.0.2883.87。

谢谢。

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

Answer 1

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

为了获得最佳兼容性，请使用 id 而不是 name（如 cmets 中的 @DavidThomas 所述）。

最后，因为您现在可以使用id，您的目标不再需要仅限于超链接。不要创建可以链接到的空锚元素，这只会使 DOM 混乱，而是选择 DOM 中的现有元素并使用它。

除非出现这些问题，否则以下代码会在文档的第一段创建一个id，底部的硬编码链接可以滚动到该段。

作为一个例子，请注意我还在顶部硬编码了一个“转到底部”链接，当您单击它时，您不会看到底部一直滚动到顶部。

如果您使用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>