グラビカ学習帳～四谷のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

ヘッダー固定のサイトでアンカーリンクを使用する際、そのままだとヘッダーの分だけコンテンツが隠れてしまいます。
同じページ内のアンカーリンクであればスムーズスクロールのJSに直接書き加えてしまったりするのですが、別ページへの遷移＋アンカーリンクの場合の対応を考えてみました。

以下のJSを遷移後のページに記述します。
要jQueryです。

$(function(){

    var headerH = 50; //ヘッダーの高さ

    $(window).on("load", function(){
      if(location.hash !== ""){
        var targetOffset = $(location.hash).offset().top;
        $(window).scrollTop(targetOffset - headerH);
      }
    });

});

ヘッダーの高さはサイトに合わせて変更してください。
これでヘッダー分下がった位置にスクロールされます。

ただこの手法、ページ内のすべての要素が読み込み終わってからの動作になるので、どうしても目当ての位置にスクロールされるまで時間がかかってしまい...。
どうにも気持ちの良くない感じになってしまうので、onloadを使わない手法に改善できないか考えてみたいと思います。

<input>や<textarea>をクリックした際、中に書かれているテキストを全選択するスクリプトです。要jQuery。
内容をコピーさせたいテキストボックスを作る場合に実装してあると便利です。

$("ID名など").focus(function(){
  $(this).select();
});

FlashでActionScriptを書く際によく使っていたものなのですが、インスタンスに変数などのデータを持たせることができます。
例えば複数のインスタンスの状態を管理するとき、配列などで管理しなくてもそれぞれのインスタンスに直接変数を持たせておけばよいので直感的にできます。

探してみたところJavaScriptにもあるようで、こちらはDOM要素にデータを持たせることができます。要jQueryです。


■格納
jQuery.data(elem, name, value)

（例）jQuery.data($("#target").get(0), "color", "red");


■取得
jQuery.data(elem, name)

（例）jQuery.data($("#target").get(0), "color");
　　// red


実はJavaScriptを使い初めた頃に困ってたことでもあるので、便利に使っていこうと思います。

以前も引っかかったことのある問題なので、忘れないよう書いておこうと思います。

JavaScriptでユーザーエージェントを取得してSafariを判別したい場合、
以下のようになります。
※2018.7.11 コメントでEdgeの件ご指摘いただいたので追記しました
※2016.9.9 ソースの括弧が多かったので修正しました

var ua = window.navigator.userAgent.toLowerCase();

if (ua.indexOf('safari') !== -1){
// ここにSafari用の記述
}

一見正しそうですが、実はこれだと問題が・・。
Google Chromeのユーザーエージェントを見てみます。

例）
Mozilla/5.0 (Windows NT 6.3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.134 Safari/537.36

そこにはSafariの文字が！
ですので上記の振り分けだと、Chromeまで対象になってしまいます。
Safariのみを対象にする場合はChromeを除外して、

var ua = window.navigator.userAgent.toLowerCase();

if (ua.indexOf('safari') !== -1 && ua.indexOf('chrome') === -1){
// ここにSafari用の記述
}

とすることで実装できます。


※2018.7.11 追記
さらにEdgeにも Safari の文字が入っているとご指摘いただきました。ありがとうございます。

■Microsoft Edge のユーザーエージェント
mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/64.0.3282.140 Safari/537.36 edge/17.17134

入っています・・。
chrome とも入っているので結果的に chrome 用の記述が効いていますが、
念の為 Edge も追加しましよう。

var ua = window.navigator.userAgent.toLowerCase();

if (ua.indexOf('safari') !== -1 && ua.indexOf('chrome') === -1 && ua.indexOf('edge') === -1){
// ここにSafari用の記述
}

これでOKです。

詳しく調べていないのでメモ書き程度ですが、
Android 4.Xのデフォルトブラウザで遭遇した現象について。
INFOBAR A02だけの問題という可能性もあります。


・ページ読み込み時に $(window).height() でウインドウの高さを取得しようとした

・$(function(){ ... }); で取得すると、実際の高さからアドレスバーを引いたくらいの
　高さが取得される

・$(window).bind('load', function(){ ... }); で取得すると正しい高さが取得できる


Android 2.Xでは1つ目の記述で大丈夫でした。