コーディングの勉強

【JavaScript】ヘッダー固定時にページ内リンクのズレを解消して記事の途中に飛ばすには?

こんにちは、mito(@mito_works)です!

今回は、メニューヘッダーを固定して、メニューのリンクからページ内の他の場所へ移動するにはどう実装するか?書きます。

mito
mito
position:fixedを使ってヘッダーを固定した場合、ページ内リンクの位置がヘッダーの高さ分ずれてしまったので、JavaScriptを使ってズレを調整しました。

momo
momo
JavaScriptで実装するとリンク先への移動にアニメーションをつけることが可能になるよ!

 

HTMLでの記載

<!--ヘッダー部分 -->
<header>
 <div class="header">
  <a href="#taitle-program" >プログラム</a>
 </div>
</header>

<!--ページの途中のタイトル部分 -->
<div class="program">
 <h3 class="title-about" id="taitle-program">プログラム</h3>
</div>

<a>タグは他のページへのリンクだけでなく、ページ内のリンクを作ることもできる。

  1. リンクの飛び先にidを指定
  2. <a>タグのhref属性に”#id名”
momo
momo
<a>タグをクリックすると、そのidの要素が表示されている場所まで移動するという動きになるよ!

CSSでの記載

ヘッダーの高さは90pxで固定しています。

header {
  height: 90px;
  width: 100%;
  background-color: rgba(0, 145, 167, 0.9);
  position :fixed;
  top: 0;
  z-index: 10;
}

JavaScriptで調整する

//ナビゲーションからのページ内移動
//固定したヘッダ分だけ下げて表示
$('header a').click(function(){
 headerHight = 90;
 var id = $(this).attr('href');
 var position = $(id).offset().top;
 $('html, body').animate({'scrollTop': position-headerHight }, 500);
});

 

scrollTopメソッド

$(‘html, body’).scrollTop(値); のように指定し、ページ最上部から値pxの位置に移動することができる。

momo
momo
scrollTopは通常$(‘html, body’)に対して用いるので、セットで覚えておくとよいよ!

animateメソッド

CSSの値だけでなく、scrollTopなどの値も変更できる。
$(‘html, body’).animate({‘scrollTop’: 0}, 時間); のように指定する。

momo
momo
変更するプロパティ、値、アニメーションの速さの順で、animateの引数を書くよ!

offsetメソッド

要素の表示位置を取得することができます。offsetメソッドは、ページの上端からの距離とページの左端からの距離が連想配列の形で返ってくる。
offset().topとすると、ページの上端からの距離が取得できる。

例えば

HTMLで記載しているh1のプログラムの位置が知りたい場合
$(‘h1’).offset();とすると {top:50,left:100}という連想配列が返ってくる。$(‘h1’).offset.top();とすると、ページ上端からの距離のみなので50という値が返ってくる。

attrメソッド

href属性の値を取得し、offsetメソッドでその要素の位置を取得することでページ内リンクを実装できる。

var id = $(this).attr('href');
var position = $(id).offset().top;
  1. idにクイックしたボタンの飛び先を取得
  2. 飛び先の最上部からの距離を取得

今回はヘッダーの高さ分引き算をしています。

ABOUT ME
mito
こんにちは!mitoです。 2児の母で、会社員。 現在は複業でWebデザイナーをしています。 2019年1月からWebデザインの勉強を始めました。 子育てをする中で、自分の生活に働き方を合わせたいと思うようになり、フリーランスを模索しています。 好奇心旺盛でやりたいこと多め、ワクワクすると止まれない性格です。 同じように一緒にチャレンジする人の背中そっと押せたり、励ましあえるようなブログになるといいなと思っています。