jQuery~上級編(ページ内のリンクとナビゲーションの作成)~

プログラミングの勉強日記

2020年6月1日　Progate Lv.83

ページ内のリンクの作成

aタグで作る

　<a>タグは他のページのリンクではなく、ページ内のリンクを作ることもできる。<a>タグのhref属性に"#id名"を追加すると、<a>タグをクリックするとそのidの要素が表示するところまで移動する。

<a href="#conetnt">...</a>
<div id="content">...<div>

scrollTopメソッド

　ページ内リンクはjQureyでも実装することができる。jQueryで実装するとリンク先への移動にアニメーションを付けることができる。$('html body').scrollTop(値);のように設定し、ページ最上部からの値pxの位置に移動できる。

$('#top-btn').click(function(){
  $('html body').scrollTop(0);  //スクロールされている部分の距離が0=ページ最上部
});

ナビゲーションの作成

　押したボタンに応じて任意の場所まで自動でスクロールする

offsetメソッドを作る

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

h1要素の表示位置を取得

$('h1').offset();   //{top:180, left:100}

ページ最上部からのh1の要素の距離を取得

$('h1').offset().top;  //180

attrメソッドで飛び先の取得

　各ボタンはaタグにして、そのhref属性に飛ぶ先のid名を指定する。クリックしたときにattrメソッドでhref属性の値を取得して、offsetメソッドでその位置を取得することでページ内リンクを実装する。

<a class="scroll-btn" href="#html">HTML</a>
....
<div id="html">....</div>

$('.scroll-btn').click(function(){
  var id=$(this).attr('href');     //クリックしたボタンの飛び先を取得
  var position=$(id).attr('href'); //飛び先の最上部からの距離を取得
});