質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.60%

webページで別ページよりリンク先のすべてのコンテンツを読み込んでからアンカータグに移動したい

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 5,626

score 15

とあるポータルサイトを作成しています。

遷移前のページには「test.php?id=00#aaa」のような感じでリンクがあります。

遷移後のページでは
<a name="aaa" id="aaa"></a>
<p class="title" id="aaa"  name="aaa">bbb</p>
としております。

さて、遷移後のページなのですが、データベースからMySQLを使って条件に合うものを取り出して表示するので、コンテンツ量が一定でありません。
文章が2,3行だけのページもあれば、画像も文章もたくさんの場合もあります。そのため、「高さを一定」にできません。
(phpファイル自体は一枚です。それで何千・何万という種類のコンテンツページを表示することになります)

このような環境下で上記のソースを置くと、遷移後のページのコンテンツ量が少ないときは、大体そのアンカータグのところに飛んでくれるのですが、コンテンツ量が非常に多いと、なぜかずれたところに飛んでしまいます。
これはブラウザが、読み込みの最中にそのアンカータグのところに移動してしまい、移動後に画像等を読み込んでしまうからずれる、と推測します。

ブラウザバック等で戻って再度リンクをクリックすると、今度は正しい位置に飛んでくれます(きっとPC内に全部のコンテンツが読み込まれているからと推測します)。

そこで「全部を読み込むまで表示しない」をjavascriptで実装したところ、
<body style="visibility:hidden" onLoad="document.body.style.visibility='visible'">
たしかに、全部読み込むまで表示はしないのですが、なぜか、「間違ったところに先に移動してしまう悪いクセは解消されず、間違ったところで全部を読み込むまで待っている」のです。
結局、ずれたところに飛んだ状態で表示されます。

何とかブラウザに、「全部読み込むまでじっとしていてもらい、すべてが読み込まれてからしかるべき場所に移動してほしい」とネットで色々調べたのですが、うまく見つからず、こちらに投稿させていただいた次第です。

さて、皆様にご質問です。

1.タイトルの通り、「webページで別ページよりリンク先のすべてのコンテンツを読み込んでからアンカータグに移動したい」ということは可能なのでしょうか?可能であれば、どのように実装すればよいかご教授いただきたいです。言語はphpまたはjavascriptでお願いいたします。
私の先入観では、アンカータグと言うのは、ページ内リンクのように全てのコンテンツを読み込んだ上で利用する、あるいは、div・画像等高さが正確に設定されている静的ページに対して指定できるもの、と思っておりました。

2.もしブラウザの仕様等で上記のことが不可能な場合、そのエビデンス・証拠等はございますでしょうか。
お客様(発注者様)に「できません」というときに、私の力不足でできないのではなく、「そういうものです」という確たる証拠を提出できれば、お客様も納得していただけると思います。

以上、どうぞよろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • think49

    2015/12/16 12:09

    「test.php?id=00&anchor=aaa」ならフラグメント識別子がない為、ページ上端に遷移するのが通常です。id="aaa" の位置にジャンプするはずがありませんが、何か前提が間違っているのではないでしょうか。

    キャンセル

回答 4

checkベストアンサー

+2

window.onload = function(){
    window.location.href = "#aaa";
}

とかでできませんか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/12/17 10:12

    「アンカータグが下のほうにあるとき、ずれて移動」とありますが、ずれているときには対象のアンカータグは画面内にありますか?

    キャンセル

  • 2015/12/24 10:36

    ずれているときは、アンカータグは画面内にはありません。
    別ページから遷移した瞬間、そのずれた場所にあります。
    そして、移動したのち、画像が次々読み込まれていく感じです。
    テキストは、感覚ですが、全部最初に読み込まれていると思います。

    キャンセル

  • 2015/12/24 11:19

    window.onloadは画像の読み込みも終了したあとに動作するはずです。(私の認識では・・・)
    https://developer.mozilla.org/ja/docs/Web/API/GlobalEventHandlers/onload

    ですので、javascript等で読み込み後に操作をしていない限り、私が提示した方法できちんと移動すると思っています。

    可能ならばソースを提示してもらえますか?

    キャンセル

+1

Instantclickという、「マウスを載せた時点でリンクを読み始めて、実際に遷移するときにはJavaScriptで中身を書き換える」というライブラリがありますので、このあたりの処理が参考になるかもしれません。

もっとも、画像にwidthheightを適切に指定すれば、「HTMLの読み込み後に位置がずれる」という現象そのものを解決できるので、そっちを検討したほうがいいかもしれません。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/12/16 13:11

    「Instantclick」というのは初めて聞きました。ありがとうございます。
    調べてみます。

    キャンセル

0

画像が表示されてからというのは、この辺りを参照してください。
他にも理由がありそうならこれもためしてみるといいかもしれません。

なお両方とも中身は検証していない点はご了承ください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/12/17 08:52

    ありがとうございます。
    一個目のリンクはごく初期に見つけていたのですが、そのときはスルーしていました。
    でも今となっては試す必要があると思います。
    二つ目のリンクは知りませんでした。
    こちらも合わせて試してみます。
    重ねて、ありがとうございます。

    キャンセル

0

jQueryを使用して以下の記述ではどうでしょうか。

$(document).ready( function(){
    windown.location.href = "#aaa" ;
});

onloadとjQueryのreadyの違いはこちらを参照。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/12/21 08:50

    ありがとうございます。
    試してみましたが、まだずれが生じるケースがあるようです。
    アドバイスいただき、ありがとうございます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.60%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • トップ
  • PHPに関する質問
  • webページで別ページよりリンク先のすべてのコンテンツを読み込んでからアンカータグに移動したい