ページ内リンクへのスクロールの実装

ページ内リンクへのスクロール機能を作ってみたので復習として記録しておきます。
HPの作成などで縦に長くなって来るとスクロールでページ内の移動が出来るととても便利です。

↑こんなやつです。
こちらはヘッダーの各項目がaタグになっていてhref属性にidを指定することにより対応するidのコンテンツに移動することができるようになっています。

実装方法

では早速実装方法について見ていきます。
先ずはヘッダー部分ですが、上で述べているようにaタグのhref属性に各項目のidを指定しています。

index.html

<nav>
 <ul>
  <li ><a href="#home_btn">トップページ</a></li>
  <li ><a href="#about_btn">会社概要</a></li>
  <li ><a href="#works_btn">事業内容</a></li>
  ※省略
  <li ><a href="#contact_btn">お問い合わせ</a></li>
 </ul>
</nav>

こんな感じです。
それに対して、例えばお問い合わせの部分には

index.html

<footer class="footer" id = "contact_btn">
 <div class="content-wrapper">
  <div class="address">
   <h2>お問い合わせ</h2>
  以下省略

という具合にフッター部分のidをcontact_btnに設定してヘッダーのお問い合わせと対応させています。

scrollTopメソッド

ヘッダーの項目をクリックして下のコンテンツに移動させる為にここではscrollTopメソッドを使用します。
scrollTopメソッドとは、


$('html, body').scrollTop(値);

というように記述することにより、ページの**Topから値分(px)**だけ移動するというメソッドです。
例えば$('html, body').scrollTop(500); ならばトップから下へ500pxだけ移動するというものです。

animateメソッドとの合わせ技

さらに今回はscrollTopメソッドとanimateメソッドを組み合わせてスクロールにアニメーションをつけていきます。
上の記述を少しだけいじくって、

$('html, body').animate({'scrollTop': 値}, 時間);

ここまでをJSファイルで実装すると

scroll.js

$(function() {
  var contact = $('#contact_btn'); //変数contactを定義
  contact.click(function() { //contactをクリックしたら
   $('html, body').animate({'scrollTop': 1000}, 500); //Topから1000px分だけ0.5秒かけて移動する
 }
);

という感じでしょうか？
取り敢えずこれで実装は完了です。

更に一歩踏み込んで

さて、一応完成したスクロールの実装ですが、このままですとナビゲーションの項目が増えていくと
変数var〇〇を項目の数だけ追加し・・・
それぞれの変数に対してclickイベントを設定し・・・
それぞれのコンテンツの移動距離を調べて・・・
やることが段々増えてきました😂

なんとかシンプルにならんもんか？

offsetメソッドの登場

１つ１つ地道に実装するとして、一番面倒なのが移動距離を調べることかなと思われます。
この移動距離めんどくさい問題についてはoffsetメソッドが解決してくれます！！
offsetメソッドは

$('セレクタ').offset();　//上端から〇〇px,左端から〇〇pxの位置

とすることでセレクタの位置情報を取得することが出来ます。

attrメソッドで移動先を取得する。

次に、attrメソッドを使用して移動先を取得します。
attrメソッドとはHTML要素の属性を取得したり設定することができるメソッドになります。
例えば


<h1 id= "test">テスト</h1>

に対して


$('h1').attr('id');

とすると、attrメソッドによって　test が取得されます。
今回はまず、attrによってaタグのherf属性から移動先を取得し、取得した移動先への距離をoffsetで取得するというわけです。

scroll.js

$(function() { 
  $('header a').click(function(){  //ヘッダーのaタグをクリック
    var id = $(this).attr('href'); //クリックしたaタグのherfの値（移動先）を取得し変数idに代入
    var position = $(id).offset().top; //上の変数idの上端からの位置情報を取得して変数positionに代入
    $('html,body').animate({'scrollTop': position},500); //0.5秒かけて変数positionで取得した距離を移動
   });
 });

これで完成！！
だいぶスッキリしました。

まとめ

今回の実装では
①各コンテンツにidを設定する。
②ヘッダーの各リンクの飛び先をページ内リンクに設定する
③scrollTop()とanimate()メソッドを使いスクロールを実装。
④attr()でリンク先を、offset()でリンク先への距離を取得し変数にする。
という感じでページ内スクロールの実装を行ってきました。

JSを本格的に勉強し出して１ヶ月弱ですが、このような動きのあるページを作れるようになり楽しくなってきたところです。
コードの書き方など至らぬ点も多々あるかも知れませんが、お気付きの点ご指摘いただけますと幸いです。

最後までお読みいただきましてありがとうございました！！