こんにちは、mito（@mito_works）です！
今回は、メニューヘッダーを固定して、メニューのリンクからページ内の他の場所へ移動するにはどう実装するか？書きます。
mito
position:fixedを使ってヘッダーを固定した場合、ページ内リンクの位置がヘッダーの高さ分ずれてしまったので、JavaScriptを使ってズレを調整しました。
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>タグは他のページへのリンクだけでなく、ページ内のリンクを作ることもできる。
- リンクの飛び先にidを指定
- <a>タグのhref属性に”#id名”
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
scrollTopは通常$(‘html, body’)に対して用いるので、セットで覚えておくとよいよ！
animateメソッド
CSSの値だけでなく、scrollTopなどの値も変更できる。
$(‘html, body’).animate({‘scrollTop’: 0}, 時間); のように指定する。
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;- idにクイックしたボタンの飛び先を取得
- 飛び先の最上部からの距離を取得
今回はヘッダーの高さ分引き算をしています。
ABOUT ME
スポンサーリンク
スポンサーリンク
