javascript - 如何链接到在 Javascript 创建之前不存在的锚标记？

Question

我有一个包含一组<div>元素的页面，每个元素都有一个与之关联的锚标记。它看起来像这样：

<a name="anchor-0"></a>
<div id="div0">Some stuff</div>
<a name="anchor-1"></a>
<div id="div1">More stuff</div>
<a name="anchor-2"></a>
<div id="div2">Yet more stuff</div>

问题是这组<div>和<a>标签是由 Javascript 生成的，因此它们在页面创建之前不存在。当我创建这样的链接时：

http://www.mywebsite.com/mypage.html#anchor-2

...它加载页面但不跳转到该anchor-2位置，该位置仅在浏览器有时间执行生成它的 Javascript 后创建。

Javascript 生成它们后，如何让浏览器移动到选定的锚标记位置？

---

这基本上是生成 HTML 的 Javascript 的样子：

function init() {
  gapi.client.setApiKey('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
  gapi.client.load('blogger', 'v2', function() {
    var request = gapi.client.blogger.posts.list({
      'blogId': 'xxxxxxxxxxxxxxxxxxxxxxxx',
      'fields': 'items(content,title)'
    });
    request.execute(function(response) {
    var main = document.getElementById("main");
    var anchor = 0;
      for (var i = 0; i < response.items.length; i++)
      {
        var Div = document.createElement("div")
        $(Div).append(response.items[i].title);
        $(main).append(Div);
        anchor = document.createElement("a");
        anchor.name = "anchor-" + anchor;
        anchor = anchor +1;

      }
    });
  });
}

Answer 1

创建元素后，您可以执行以下操作：

location.hash = "#anchor-2";

或使用scrollIntoView

element = document.getElementById('your_element-id');
element.scrollIntoView();

通过执行以下操作从 url 获取哈希值::

var hashVal = window.location.hash.substr(1);
//then jump to that hash
location.hash = "#" + hashVal;