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

Question

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

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

为了使事情更清楚，以下是不起作用的顺序：

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

2. </body>标记之前的JavaScript添加了我的锚标记（<a name="here"></a>）

3. 我将地址栏中的网址更改为＆＃34; mysite.com/mypage.php#here"

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

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

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

我希望有人可以直截了当或确认我的发现并建议解决方法。

我在Windows 7上的Chrome版本55.0.2883.87上。

感谢。

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

Answer 1

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

将其从表中移除，使用id代替name（如评论中所述的@DavidThomas）以获得最佳兼容性。

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

除了这些问题之外，以下代码在文档的第一段创建了一个id，底部的硬编码链接可以滚动到该页面。

作为一个例子，请注意我也已经硬编码了＃34;转到底部＆＃34;链接在顶部，当您点击它时，您不会看到底部滚动一直到顶部。

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

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;