2

一連の要素を持つページがあり<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;

      }
    });
  });
}
4

1 に答える 1

2

要素の作成後、次のことができます。

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;
于 2013-09-10T03:13:39.190 に答える