あけました、jQueryでページ内スクロールの微調整

あけましておめでとうございます。2020年。令和2年。なんとなくすっきりした字面で、すきです。変革躍進の年にしたいものです。

ということで、元日ですがせっせとコードを書いたりいじったりしています。今日はjQueryをさわっていました。

ページ内リンクのスクロールを滑らかにするためのjQueryを調べていたんですが、すごく簡単でした。とはいえjQuery自体がものすごく親切簡単なものではあるのですが。

といいつつ、微妙にしっくりこないところの調整に少し時間がかかったので、その部分をメモ。

【jQuery】ページ内リンクでスムーズスクロール(スクロール位置の調整も簡単にできる) | 125naroom / デザインするところ(会社)です。
jQueryを使うとするするとスクロールして移動させることができます。 視覚的にもとても良いのでおすすめです。 … 続きを読む

こちらのページの、

$(function(){
  $('a[href^=#]').click(function(){
    var adjust = 0;
    var speed = 400;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top + adjust;
    $('body,html').animate({scrollTop:position}, speed, 'swing');
    return false;
  });
});

こちらを、とりあえずお決まりの丸コピペでやってみたところ、できない。滑らかなスクロールにならず、目的地までパッて飛んでしまう。

jQueryは読み込んでいるし、何が悪いんだろう…と他のwebサイトも見つつ、いろいろ試しつつやったところ、2行目にある $(‘a[href^=#]’) の # を、 “” でくくってあげたらちゃんと実装できました。つまり、 $(‘a[href^=”#”]’) にしただけで解決しました。いつも思うけど、こういう根本的な部分でちょっとだけ足りてないだけで全くうまくいかなくなるの、すごく大変です。いろんなwebサイトに書かれているコードを見比べながら原因を探すのは、難易度の高い間違い探ししてる気分。

で、ひとまず滑らかスクロールはうまくいったんですが、これだけだとリンク先がページの上部にピッタリ来てしまうんですよね。ヘッダーとかあると、思いっきりヘッダーにかぶってしまう。

なので次に、さきほどのページの、

$(function(){
  // #で始まるアンカーをクリックした場合に処理
  $('.s_02 a[href^=#]').click(function(){
    // 移動先を50px上にずらす
    var adjust = 50;
    // スクロールの速度
    var speed = 400; // ミリ秒
    // アンカーの値取得
    var href= $(this).attr("href");
    // 移動先を取得
    var target = $(href == "#" || href == "" ? 'html' : href);
    // 移動先を調整
    var position = target.offset().top - adjust;
    // スムーススクロール
    $('body,html').animate({scrollTop:position}, speed, 'swing');
    return false;
  });
});

こちらを参考にしながら、位置をずらせるよう調整してみました。

ここでも目を皿にしてコードを見比べ、間違い探しをしまして、 var adjust の数値を変更して、 var position で + にしている adjust を – にしてみたら、あっさり位置調整できました。要は adjust で定義した数値を、 top から引き算する式を入れて、出た数値を position に指定されるように記述してやればいいみたいです。他のwebサイトでは adjust ではなく headerHight を使っているところもありましたが、それでもできました。なんでもいいんですかね?今回は単語数の短い adjust を使いました。

最終的にはこうなりました。

 $(function(){
   $('a[href^="#"]').click(function(){
     var adjust = 60;
     var speed = 400;
     var href= $(this).attr("href");
     var target = $(href == "#" || href == "" ? 'html' : href);
     var position = target.offset().top - adjust;
     $("html, body").animate({scrollTop:position}, speed, "swing");
     return false;
   });
 });

header の height は 55px にしているので、ちょっと余裕をもたせて adjust は60にしました。speed は、コンテンツの量で細かくいじるといいですね。

jQuery は、仕組みがわかってしまえば、考え方自体はとてもシンプルで、すきです。すきなものに囲まれたり、触れていられる1年にしたいものですね。うまく締まった。

かしこ

タイトルとURLをコピーしました