スムーススクロールの実装

スムーススクロールとは

ページ内をスクロールする挙動のこと。
ボタンを押したらリンク先までスクロールされる。（Topに戻るなど）

HTML

aタグhrefでスクロール先をid指定する。

    <ul class="menu">
      <li class="menu-profile ">
        <a href="#profile-box" class="menu-list">PROFILE</a>
      </li>
      <li class="menu-skill">
        <a href="#skill-box" class="menu-list">SKILL</a>
      </li>
      <li class="menu-works">
        <a href="#works-box" class="menu-list">WORKS</a>
      </li>
      <li class="menu-contact">
        <a href="#contact-box" class="menu-list">CONTACT</a>
      </li>
    </ul>
------------------------------------

<div id="profile-box" class="box">

<div id="skill-box" class="box">

<div id="works-box" class="box">

<div id="contact-box" class="box">

JavaScript

$(function(){
  // aタグをクリックし、href属性に # から始まるリンクが設定してあったら発動
  $('a[href^=#]').click(function(){
    // クリックしたaタグのhref属性（リンク先URI）を取得し、変数に格納
    var href= $(this).attr("href");
    // 上で取得した値が#か空白だったら'html'を、それ以外だったら先ほど取得したhref属性の値を変数に格納
    var target = $(href == "#" || href == "" ? 'html' : href);
    // 変数targetのページトップからの位置を取得し、変数に格納
    var position = target.offset().top;
    // 0.4秒でスクロール
    var speed = 400;
    // scrollTopに上で取得した位置を設定し、ヌルヌルとスクロールさせる
    $('body,html').animate({scrollTop:position}, speed, 'swing');
    // a要素のデフォルトの機能を無効化する
    return false;
  });
});