- ベストアンサー
safariでページ内リンクが動かない
- safariでページ内リンクがうまく動作しない問題について質問します。
- 環境によってグローバルナビのページ内リンクが動かないことがあります。
- リンク元とリンク先のソースに問題は見当たりませんが、なぜ動かないのかわかりません。
- yokohamama
- お礼率80% (4/5)
- CSS
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
結論：スクリプトの不具合と考えられます。 もし修正するなら，スクリプトによる遷移を解除し，デフォルトのリンク動作に戻すのがおすすめです。 考えられる原因は，JavaScript の仕様の違いです。 同じスクリプトの文面でも，各ブラウザがそれぞれわずかに異なった解釈をすることで，意図しない結果を得ることはよくあります。 開発者は Safari 6.0.5 でも動作させるつもりで作成したのでしょうが，不運なことに今回はうまくいかなかったようです。 （１）のテンプレートでは JavaScript がオフの環境も考慮されており，正しく href="#services"，id="services" が設定されています。 オンの環境では，JavaScript によってこのデフォルトの動作（href="#services" をクリックすると id="services" へ移動する）をキャンセルしてから遷移を起こす仕組みになっています。 しかし，JavaScript がオンの状態でもうまく動作しない環境の場合，キャンセルだけが正常になされて遷移が起こらないことになります。 つまり，クリックしても移動しないという結果になるのです。 JavaScript をオフにして試すと，なめらかな動きこそなくなるものの正常に動作するはずです。 簡単な解決方法は，スクリプトによる遷移の動作を取り払うことです。 デフォルトの動作ならばほとんど全てのブラウザで動くはずです。 どうしてもスクリプトによる遷移を行ないたいならば １）正常な動作をするスクリプトに差し替える ２）テンプレートの開発者にバグ報告を行ない，修正してもらう ３）自力でスクリプトを修正する などになります。 １）正常な動作をするスクリプトに差し替える （１）のテンプレートは Smooth Scrolling http://css-tricks.com/snippets/jquery/smooth-scrolling/ を用い，一方（２）のテンプレートは jquery.nicescroll 3.1.2 http://areaaperta.com/nicescroll または Bootstrap http://getbootstrap.com/ を用いているようです（（２）のほうは不確かです）。 これらを取り替え，正しく動くように多少記述を書き換えればうまくいくかもしれません。 また，「スムーズスクロール」という技術はこれら以外にもたくさんあるので，how to サイトを参照して代替スクリプトを用意するのもよいかと思います。 ２）テンプレートの開発者にバグ報告を行ない，修正してもらう テンプレートの開発者に使用状況や現象などを細かく報告し，修正してもらいます。 （１）のテンプレートは onhashchange イベントや location.pushState() メソッドなどの比較的新しい技術を用いているように見えますが，これらと旧ブラウザへの対応がこんぐらがってうまく動いていないと推測しています。 ３）自力でスクリプトを修正する 「スムーズスクロール」で調べればより安定動作する書き方が見つかるかと思いますので，それに倣って修正します。 ちなみに Mac OS X 10.6.8, Safari 5.1.9 では（１）（２）ともに問題なく動作しました。 余談です。 私はスムーズスクロールが好きではありません。 理由は，遷移が遅い点とブラウザの「戻る」が効かない点です。 遷移が遅いのは，スムーズさを強調したいからか，素早すぎると混乱するからでしょうか。 にしても 1000 ミリ秒もかけてもたもた移動する必要はないと思うのです。 ページ内ジャンプのあと先ほど見ていた場所にすぐ戻りたいと思うことはよくありますが，これを叶えてくれるアイテムは今のところブラウザの「戻る」ボタンしか知りません。 しかし，スクリプトによってデフォルトの動作がキャンセルされてしまうと戻ることができません。 この場合，デフォルトの動作を再現するのはスクリプトの責任であるはずですが，そのためにはずっと複雑なアルゴリズムを書く必要があるためか，実践されているのを見かけたことはありません。 デザインとしてはかっこいいのかもしれないけど（私は思わないけど），ユーザーに優しくない気がするのです。 シンプルに，デフォルトのジャンプでいいではないかと思ってしまいます。
お礼
解決方法までご提示くださいまして、本当に本当にありがとうございます！！ とても困っていたので本当に助かりました！ まずは、 >２）テンプレートの開発者にバグ報告を行ない，修正してもう を試みてみようと思います。 ただ、無料テンプレートなので、修正してもらえるかどうかはわからないため、同時に １）か３）の対応も実施してみたいと思います。 スムーズスクロールに関しては、f1204-okw様が仰る通り賛否両論あるのですが、お客様がこの動きを気に入ってらっしゃるため、どうにか実装したいと思っている次第です。 （お客様が気に入っていても、利用者にストレスがかかるサイトはどうなのか…という懸念事項もあるのですが…） 早速ご回答いただけましたことと、代替案を複数ご提示していただけましたことで、ベストアンサーとさせていただきます。 ありがとうございました。