jQueryでページ内リンクを固定ヘッダー分ずらす方法

jQueryでページ内リンクを固定ヘッダー分ずらす方法 javascript
この記事は約4分で読めます。
スポンサーリンク

昨日、「スムーススクロールでページ内リンクをそっこう実装できるjQuery」を紹介しましたが、
固定ヘッダーがあると、その分ずらさなくちゃいけない。。。。すごい手間。
今回はそんな手間をそっこう解決できるjQueryのご紹介です。

基本になるHTMLとCSS

See the Pen
スムーススクロール無し
by endebataro (@endebataro)
on CodePen.

これだけだと、ビクッとスクロールして全然スムースじゃあない!

次にヘッダー分ずらしてスルスル~っとスムースにスクロールを行います。
(宇宙人云々かんぬんは、自分が好きで書いております。不快に思われた方には申し訳ないです。)

スムーススクロールの見本

See the Pen
スムーススクロール有り
by endebataro (@endebataro)
on CodePen.

【jQuery】

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

解説

「jQuery」を一行ずつ説明していこうと思います。
1行目の「 $(function() 」は「無名関数」と言って、ページが読み込まれたら即実行する関数です。
2行目の「 $(‘a[href^=”#”]’) 」が、「ページ内リンクを含むaタグ」を意味しています。つまり「ページ内リンクをクリックしたら」となります。
3行目は「speed」という変数に「600」を代入しています。この「speed」変数はスクロールスピードに使われるため、スピードと名付けています。スクロールスピードを略して「ss」(Scroll-Speed)でもいいですが、「ss」だとナチスの親衛隊と間違われかねないのでやめときます。
4行目の「 var header_height = $(“header”).height(); 」が今回イチバン大事な行です!こちらも上の行と同じように変数に代入していますが、ヘッダーの高さ( $(“header”).height() )を代入しています。こうすることで、後からロゴサイズや余白を増減しても自動で高さを取得してくれるので楽なんです。
5行目は、クリックされたaタグの「href」を取得しています。
6行目は、5行目で取得した「href」がページ内リンクかどうかと、空ではないかを見ています。
7行目では、ページ内リンクが上から何ピクセルあって、そこから4行目で取得したヘッダーの高さを引いています。
8行目で、スクロールアニメーションをしています。「 $(‘body,html’) 」を7行目で取得したピクセル分下に下がり、その時間は3行目で代入した「600ms」で、動きは「’swing’」にしてください!ということになります。
9行目の「 return false; 」の意味は、「処理はここまでっ!」となります。これは、javascriptを見ていると様々な所で出てきますが、jQueryの場合無くても動いてしまいます。jQueryのこうゆう寛大さがスキで他のプラグインやフレームワークが出てきても、結局jQueryに戻ってしまいます。
10行目、11行目は「クリック処理を閉じて」「無名関数を閉じて」終わりです。

まとめ

とても読みづらい文章を長く書いてしまいましたが、リンクをスムースにする「jQuery」さえ記述しておけば、「上へ戻る」もaタグをつけるだけで簡単に実装可能です!
「スムーススクロールの見本」を一番下までスクロールすると「上へ戻る」ボタンが出てきますので押してみてください!

将来、この様な処理を「スラスラ~」っと書ける様になる日まで、この「初めてのブログ」を利用して頂けるととっても嬉しいです!
エンデ・バタローでした。

SNSフォローボタン
エンデ・バタローをフォローする
javascriptjQueryサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

  1. Good response in return of this matter with firm arguments and telling all concerning that.

    • こちらこそ。
      コメントありがとうね。
      日本語ばかりで見辛いけれど、またみてくれたら嬉しいです。

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