jQueryでスクロールするアニメーション

様々なエフェクトやアニメーションを実装できるJavascriptのライブラリであるjQuery。

jQueryを使うことによって、Javascriptでは膨大な量になってしまうソースコードも短く簡単に記述することができます。
基本的なjQueryの操作は、オブジェクトを作成し、そのオブジェクトに対してメソッドを呼び出すという流れになります。
今回は、jQueryを使ってナビにスクロールするアニメーションを付与する方法を紹介します。

DEMO

まず、HTMLのコード
コンテンツ毎にページ内移動するためのidを与えておきます。

<header class="header">
  <ul>
    <li>
      <a href="#top">TOP</a>
    </li>
    <li>
      <a href="#about">About</a>
    </li>
    <li>
      <a href="#work">Work</a>
    </li>
    <li>
      <a href="#contact">Contact</a>
    </li>
  </ul>
</header>

<main class="main">
  <div class="top-contents" id="top">
    <h1>TOP</h1>
  </div>

  <div class="contents" id="about">
    <h2>About</h2>
  </div>

  <div class="contents" id="work">
    <h2>Work</h2>
  </div>

  <div class="contents" id="contact">
    <h2>Contact</h2>
  </div>
</main>
<footer>
  <div class="footer">
    <h2>Footer</h2>
  </div>
</footer>

<script type="text/javascript" src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

次にCSSのコードです。

.header {
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  line-height: 50px;
  z-index: 1;
}

.header ul {
  float: right;
  margin: 0;
  padding: 0;
}

.header ul li {
  float: left;
  margin: 0;
  padding: 0;
  list-style: none;
}

.header ul li a {
  font-weight: 600;
  padding: 10px;
  text-decoration: none;
  color: #000;
}

.header ul li a:hover {
  color: #ddd;
  text-decoration: none;
}

.top-contents
{
  height: 100px;
  padding-top: 150px;
  padding-bottom: 100px;
  background-color: #666;
  text-align: center;
}

.contents{
  height: 550px;
  background-color: #f0f8ff;
  padding-top: 50px;
  margin-top: 10px;
  text-align: center;
}

.footer{
  height: 300px;
  background-color: #666;
  padding-top: 50px;
  margin-top: 10px;
  text-align: center;
}

そしてJSのコードです。

$(function(){
  $('a').click(function(e){
    e.preventDefault();
    var id=$(this).attr('href');
    var posi=$(id).offset().top;
 
    $('html,body').animate({
      'scrollTop':posi
    },1000)
  });
});

headerの中にあるaタグにクリックイベントを作成します。
次に、変数idを定義し、attrメソッドを設けてクリックしたaタグのhref属性を取得します。
更に、変数posiを定義し、変数idに対して.offset().topを用いることで、ページの最上部からの距離を取得します。
最後はhtml,body要素に対して.アニメーションイベントを使用して、プロパティにscrollTopを設定し、値に変数posiを放り込んで完成です。

jQueryのアニメーションはCSSよりも重くはなりますが、コードが短く簡単で、アニメーション要素が限定的ではないので非常に便利です。