jQueryで別ページの動的に生成した要素までページ内リンクを効かせる

jQueryで動的に、コンテンツを生成したページへ、別ページのaタグからリンクした時に、指定要素のidにまでページ内でスクロールさせたいが、できない問題の対策

jQuery関連記事

概要

下記のようなページ1があったとする。

html

<a href="page2.html#art1">ページ2へリンク</a>

ページ1はリンク元のページで、aタグにpage2.html#art1のようにidを指定してある。
ページ2はリンク先のページでコンテンツ自体をjQueryで生成し、idも付与している。
一見そのままページ内をスクロールして該当idの箇所まで飛んでいけそうだけどいかない。
なぜならページ2に移動した時点でまだ該当idは生成されていないから。
それを解決する方法。

jQueryで要素を生成してから移動させる

JavaScript

$(window).load(function () {
    
    コンテンツ生成処理

    var n = window.location.href.slice(window.location.href.indexOf('#'));
    $(n).each(function() { 
        var p = $(n).offset().top;
        $('html,body').scrollTop(p);
        return false;
    });
});

まずコンテンツ生成処理を終わらせてhtmlに出力する。
そのあとでページ内リンクを処理する。
外部jsで書いてしまうと、処理順の関係で動かない。
scriptタグにdefer属性を付けていないからかもしれないと思ってやってみたが動かなかったので今回はこの方法で。

var nにURLからidを探して格納し、each()でidが振られた要素があれば、var p = $(n).offset().top;でその要素のページ上部からの位置を取得し、$('html,body').scrollTop(p);でスクロールさせるという処理。

アニメーションさせたい場合は$('html,body').animate({ scrollTop: p }, 'slow');みたいにしたらするーっと動くけど別ページから飛んできてるから微妙な気がする。