恵比寿のWebサイト制作・Webデザインチームのブログ。Webデザインやコーディング、SEO対策まで幅広く手掛けています。

恵比寿のデザイン制作チームのブログです。

Webデザイン、
Web制作、
SEO対策の
ご依頼・ご相談

Contact

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

投稿日:2018-03-22 更新日:




Jquery_scrollNav2

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

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

 

まず、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よりも重くはなりますが、コードが短く簡単で、アニメーション要素が限定的ではないので非常に便利です。




この記事をシェアする

  • Twitter
  • Facebook
  • BookmarkB!
  • Pocket

Related Entries

この記事を書いた人

TOM

TOM

Webデザイナー、UI/UXデザインと共にJavascript、PHP等のプログラミング言語について日々勉強中。