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

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

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

4回答

7530閲覧

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

yutarou2000

総合スコア15

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2015/12/16 01:02

編集2015/12/16 10:17

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

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hyper-drums-ko

2015/12/16 02:28

こちらの質問が他のユーザから「質問の範囲が広すぎる」という評価を受けています わからない点を明確にし、調査したこと・試したことと共に記入していただくと、回答が得られやすくなります。
think49

2015/12/16 03:09

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

回答4

0

ベストアンサー

javascript

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

とかでできませんか?

投稿2015/12/16 02:00

orange0190

総合スコア1698

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hyper-drums-ko

2015/12/16 02:27 編集

質問の意図と異なるのではないでしょうか?
orange0190

2015/12/16 02:37

質問の意図としては単純に「すべて読み込んだらアンカータグに移動」だと思ったのですが・・・
yutarou2000

2015/12/16 04:41

ご回答ありがとうございます。 質問の意図はまさに「すべて読み込んだらアンカータグに移動」です。 さて、いただいたソースを試したところ、僕が作ったソースよりはかなり精度がよろしいのですが、それでもまだ「とてもページコンテンツ量が多くて、アンカータグが下のほうにあるとき」ずれて移動されます。 「どういうとき、ずれるか?」をもっと正確に調査してみたいと思います。ありがとうございます。
orange0190

2015/12/16 04:54

コンテンツの表示はどのように行っていますか? PHPでデータベースから取得し、htmlに出力しているのならすべて出力が完了してから動作するかと思っていたのですが・・・ PHPからjavascriptに渡して、javascriptで出力しているのですか?
hyper-drums-ko

2015/12/16 04:59

> webページで別ページよりリンク先のすべてのコンテンツを読み込んでから「アンカータグ」に移動したい でしたね。 こちらの勘違いです。大変失礼いたしました。
think49

2015/12/16 06:35

> コンテンツの表示はどのように行っていますか? そこは私も気になりました。 [情報の修正依頼] でも書きましたが、リンク先が「test.php?id=00&anchor=aaa」であるのに id="aaa" のフラグメント識別子に移動する事を期待しているように見受けられます。 「test.php?id=00&anchor=aaa」から「hoge.php?id=00#aaa」にリダイレクトさせる等、何か特殊な処理が走っているものと考えていたのですが、返答がないのは何か書けない事情があるのでしょうか。
yutarou2000

2015/12/16 10:27

ご質問ありがとうございます。 すみません、質問冒頭を修正しました。 test.php?id=00&anchor=aaa → test.php?id=00#aaa でした。申し訳ございません。 さてお尋ねの件ですが、「PHPでデータベースから取得し、htmlに出力している」だけ(のつもり)です。javascriptは介しておりません。 上記の書き方で、ページのしかるべき場所(またはその近く)に飛んでいるので、全然書き方が違うわけではないところが、今回頭を悩ましているところでございます。
orange0190

2015/12/17 01:12

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

2015/12/24 01:36

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

2015/12/24 02:19

window.onloadは画像の読み込みも終了したあとに動作するはずです。(私の認識では・・・) https://developer.mozilla.org/ja/docs/Web/API/GlobalEventHandlers/onload ですので、javascript等で読み込み後に操作をしていない限り、私が提示した方法できちんと移動すると思っています。 可能ならばソースを提示してもらえますか?
guest

0

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

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

投稿2015/12/16 03:00

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yutarou2000

2015/12/16 04:11

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

0

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

javascript

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

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

投稿2015/12/19 03:47

sekitaka_1214

総合スコア509

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yutarou2000

2015/12/20 23:50

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

0

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

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

投稿2015/12/16 05:18

tozjp

総合スコア790

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yutarou2000

2015/12/16 23:52

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問