スマホサイトでのページ内リンク不具合の解決方法を教えてください
- スマホサイトを制作中にiPhoneの実機で確認した際、ページ内リンクで不具合が生じています。
- Androidでは同じ不具合は発生していませんが、解決方法が見つかりません。
- 具体的な不具合として、指定箇所へ遷移後にスクロールしても同じ位置に戻されてしまいます。
- ベストアンサー
別ページのページ内リンクでの不具合(スマホサイト)
現在、スマホサイトを制作しているのですが、iPhoneの実機で確認した際にページ内リンクで不具合が生じており、Androidでは一切同じ現象が起きないことや探してみてもそういった不具合を解決する手段が見当たらず、制作が滞ってしまったため、今回このような質問をさせていただきました。 具体的な不具合の内容としては「sample.html#content」のようなリンクによって、別ページの指定箇所(<div id="content">)へ遷移した場合にその場所からどこへスクロールしても再び同じ指定箇所に引き戻されてしまうような現象が起きています。 説明が下手な上に文章だけでは上手く伝わらないかもしれませんが、もしも同じ事態に直面した経験のある方は解決に至った方法や別の処理で同じ動作を実現する方法など、ページ遷移後も通常通りのスクロールを可能にする方法をお教えいただけたら幸いです。 本来であれば、このような事態に陥ることはまずないことかと思いますし、JavaScriptを多数組み込んでいることが原因である可能性が高いですが、JavaScriptのこの処理を行うとそういった現象が起きることがあるといったアドバイスでも構いませんので、ご教授の程、よろしくお願い致します。
- dededann
- お礼率100% (2/2)
- HTML
- 回答数1
- ありがとう数4
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
とあるWebページにおいて、iPadのsafariで同様の現象を確認したことがあります。 原因としては、下記URLにもある通りJavaScriptによるHTMLの書き換えによるものだと思われます。 挙動としては、ページの内容に変更があった時、再描画する際にURLの情報からアンカーの場所に移動しているのだと思われます。 回避方法としては、JavaScriptによるページの変更をしないことですね。 先に述べたWebページでは、きちんと最後までページを読み込ませてからスクロールすると発生しませんでしたので、ページの描画中に色々と内容を変更していて、変更が完了しないうちにスクロールしたのだと思います。 （あくまで予測ですが。） もしリアルタイムに情報を更新するような画面であれば、その部分だけインラインフレームにすることで回避できるかもしれません。 （全く実証していないので可能性の提示です。） http://hamalog.tumblr.com/post/3158769710/ios-safari
関連するQ&A
- 別ページの指定した座標へリンクしたい
こんにちは。 以前 http://oshiete1.goo.ne.jp/kotaeru.php3?q=725989 で現在表示中の指定した座標へリンクする方法で <A href="javaScript:scroll(x,y)">●●</a> を教えて頂きました。 これを応用して別ページの指定した座標へリンク できるようにしたいと思い、 <A href="javaScript:index.asp#scroll(x,y)">●●</a> と指定を変えてみたのですが、うまくいきません。 別ページはaspなのですが、別ページへは座標指定で リンクはできないのでしょうか？ どなたかご存知の方は教えて下さい。 よろしくお願いします。
- 締切済み
- HTML
- サイト内リンクについて
サイト内にスクロールのページを作っています。 メニューからリンクを#1などとし、同じページ内のスクロールのページ内のid="#3"にて指定した部分にスクロールして、飛ぶようにしたいのですが、どのようにしたらよいでしょうか？ すみません。よろしくお願い致します。
- ベストアンサー
- JavaScript
- IE7やIE8で、サイトのリンクをクリックするとページ最上部に飛んでしまいます。
Webページの下にあるリンクなどをクリックすると そのWebページの最上部に飛んでしまい、とてもうざったるいです。 最上部に飛んだ後、再度下にスクロールし同じリンクをクリックして初めてリンク先に飛ぶ事が出来ます。 IE6ではこの現象は無かったのですが IE7にした頃からこの現象が起き始め IE8にしてもこの症状は治りませんでした すごく困っています 解決方法をお知りの方は是非よろしくお願いします。
- 締切済み
- Windows XP
- スクロール位置を取得してリンク先も同じスクロール位置に
Javascript初心者です。よろしくお願いします。 scrollTopというものを使えば、 現在開いているページのスクロール位置を取得できる ということがわかりました。 その取得したデータをリンク先のページに反映したいですが、 方法がわかりません。 例えば、全ページの上部に縦300ピクセルの画像があり、 上から300ピクセルの位置にリンクしたい場合です。 アンカーポイントは使いたくありません。 あくまで前ページのスクロール位置と 同じ位置に移動したいです。 javascriptは遷移前のページも、 遷移後のページもどちらに追加してもいいです。 またブラウザごとの多少の誤差は気にしません。 どうぞよろしくお願いします。
- 締切済み
- JavaScript
- リンクが新ページで開けない
Win98 IE5.0SP2 の特定のPCのみで起こる現象です。 フレームを使っているページから、何箇所かリンクが 貼られているのですが、新ページ（target="_blank"） を指定しているリンクが開けません。 （新ウィンドウ自体が立ち上がりません） 子フレームにリンクを表示させるのは正常に作動します。 右クリックし、「新しいウィンドウを開く」とする分にはＯＫです。 利用者は、「NACHIに感染（既に駆除済み）してからこうなった」 と言ってます。 対処方法お分かりの方、ご教授お願い致します。
- 締切済み
- HTML
- 外部ページからハッシュタグ（＃）のリンクへ正しく飛ばない
外部のページから、ハッシュタグを加えたURLを指定し 自分のページの指定した箇所を表示させたいのですが、 正しい位置に飛びません。 ・自分のページの指定箇所 <div id="■■■"> ・外部ページのリンク指定 a href="http://○○○○○.jp/#■■■" ちなみに、自分のページは基本indexのみで、 ものすごく長く、 ハッシュタグを使ったjava scriptのページスクロールで 指定箇所を行き来できるようにしています。 <script type="text/javascript"> jQuery.fn.extend({ scrollTo : function(speed, easing) { <!-- hashの取得が出来なければ、処理を中断 --> if(!$(this)[0].hash || $(this)[0].hash == "#") { return false; } return this.each(function() { var targetOffset = $($(this)[0].hash).offset().top; $('html,body').animate({scrollTop: targetOffset}, speed, easing); }); } }); $(document).ready(function(){ $('a[href*=#]').click(function() { $(this).scrollTo(1200); return false; }); }); </script> これが原因なのかわかりませんが、 現状、外部からリンクした場合は、 ページ上部の<div id="□□□">には正しく飛びますが、 何故か、ページ下部の<div id="■■■">になると すべてページ最下部に飛ばされてしまいます。 原因分かる方、いらっしゃいませんでしょうか。。
- 締切済み
- HTML
- javascriptでスライドするページの作成
はじめまして。 ホームページを作成しているものです。 先日就航した全日空787のホームページのデザインが気に入って このようにページを横にスクロールして見せたいと思いました。 私はjavascriptのコードを一から書く知識がないので このような表現を代用できるテンプレートがあるのかご存知の方がいらっしゃいましたら お聞きしたいと思い投稿致しました。 参照サイト 全日空の787型機のオフィシャルサイト http://www.ana.co.jp/promotion/b787/mwj/ 細かい点になりますが、 ・javascriptページ内のテキストの縦のスクロールする方法 ・javascriptページにリンクを貼る方法→スライドするページは１枚の画像で制作する方法は試したことがあるのですが参照サイトのように、他のページへのリンクボタン、YouTubeへのリンクボタンを埋め込む方法が分かりません。 ・javascriptページ下のナビゲーションボタン（クリックすると伸びて、各ページの小さい画像が現れる）の作り方 も合わせてお分かりになりましたらどうぞよろしくお願い致します。
- 締切済み
- JavaScript
- jQuery タブメニューへのダイレクトリンクの仕方を教えてください。
jQuery UI タブ http://allabout.co.jp/internet/javascript/closeup/CU20071220A/index2.htm を参考にタブメニューを制作しているのですが、 同ページ及び、他ページから各タブメニューへ ダイレクトにリンクすることはできるのでしょうか。 ただ、ここで http://allabout.co.jp/internet/javascript/closeup/CU20071220A/index2.htm#tab2-3 とリンク先を指定すると「ソース」というところに ダイレクトにリンクするのですが、 ボタン等で指定するとうまくリンクしません。。。。。 方法があれば教えてください。 よろしくお願いします。
- ベストアンサー
- JavaScript
- safariでページ内リンクが動かない
下記のフリーテンプレートを利用してWEBページを作成する予定です。 ttp://www.styleshout.com/templates/preview/Kreative10/index.html …（１） こちらは１ページ構成となっており、 グローバルナビからページ内リンクで各コンテンツへ遷移するつくりになっているのですが、 環境によってグローバルナビのページ内リンクが動きません。 ＜動作確認OKの環境＞ ・Android4.1.1 、chrome18.0 ・iphone4s、safari ・Windows8、 chrome30.0 ・Windows8、 IE10 ＜動作確認NGの環境＞ ・Android4.1.1 、標準ブラウザ ・MacOSX 10.8.5 、safari6.0.5 ソースを確認したところ、 リンク元ソースは<a href="#services">Services</a>となっており、 リンク先ソースは<section id="services">となっており、 特に問題があるようには思えません。 別ページから ttp://www.styleshout.com/templates/preview/Kreative10/index.html#services とアクセスすると、正しく「画面遷移＋指定したIDの個所」へ遷移するのですが、 同一ページではうんともすんとも言いません。 ちなみに、下記のサイトの場合は、 ttp://www.awerest.com/demo/myway/light/ …（２） >・Android4.1.1 、標準ブラウザ >・MacOSX 10.8.5 、safari6.0.5 上記の２環境でも正常に動いています。 上記リンク（１）、（２）の両ページのリンク元、リンク先ソースは ID名以外は同じなのに、なぜ、（１）は動かなくて（２）は動くのでしょうか。 どうぞよろしくお願いいたします。
- ベストアンサー
- CSS
- 別ページからのアンカーリンクについて
現在、下記jqueryを使用して横スクロールサイトを制作中です。 http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/ 上記サイトを参考に 設置し問題なく動作しているのですが、 アンカーリンクを使用して 別ページから、各コンテンツにジャンプさせたいと思っています。 設置しているナビゲーションメニューからだと スムーズにスクロールし、正常に動作（コンテンツが一番左の位置でストップ）するのですが、 別ページから ○○.html#アンカーリンク名 というふうに リンクを張ると、表示位置が一番左の位置ではなく スクロールの途中でずれて止まってしまいます。 CSSも含め色々といじってはみたのですが まったく原因がつかめず苦戦しております。。 以下のスクリプトでは、ナビゲーションのリンクをクリックすると 動作するようにしていますが、 アンカーリンク名が○○の場合は、○○に表示させる といった命令のようなことはできるのでしょうか？ 知識不足で申し訳御座いませんが お分かりの方がおられましたら宜しくお願いいたします。 $(function() { $('ul.nav a').bind('click',function(event){ var $anchor = $(this); /* if you want to use one of the easing effects: $('html, body').stop().animate({ scrollLeft: $($anchor.attr('href')).offset().left }, 1500,'easeInOutExpo'); */ $('html, body').stop().animate({ scrollLeft: $($anchor.attr('href')).offset().left }, 1000); }); });
- 締切済み
- JavaScript
お礼
細かく解説付きでご回答いただき、ありがとうございます。 やはりJavaScriptの処理が影響してこのような不具合が生じる場合があるのですね。 JavaScriptに関する知識があまりないため、通常通りのページ内リンク(id指定によるもの)ではなく、JavaScriptを用いたページ内リンクで進めることに致しました。 次回また同じような症状が出た場合はco_maamさんにお教えいただいたやり方を試してみたいと思います！