「AnimateScroll」はグローバルナビを実装するjQueryプラグインで、クリックするとページ内の該当箇所へスクロールします。hover時のアニメーションがとても素敵なグローバルナビを実装できます。

AnimateScroll

Demoのデザインがとても素敵なプラグインです。ページ内リンクをスクロールアニメーションで移動するというものです。例えばOptionsをクリックすると。

 

この通り、Optionsの箇所へページがスクロールダウンします。

 

またレスポンシブデザインにも対応しています（Demoだけ？）。タブレット幅だとこのように。

 

さらにスマホ幅だとこのように。とても素敵です。

 

メニューバーへのhover時のアニメーションもオシャレです。下の画像は分かりにくいですね。。。ぜひリンク先から試してみてください。

 

 

それでは「AnimateScroll」の実装方法をご紹介します。まずはjQuery含む外部ファイルを読み込みます。

<script src="jquery-1.8.3.min.js"></script>
<script src="animatescroll.js"></script>

 

HTMLはこのようにマークアップします。ページの縦幅がほしかったので、brタグを多用しています。

<nav id="menu" class="nav">
  <ul>
  <li>
    <a href="#" onclick="$('#section-2').animatescroll();">
      <span class="icon"> 
        <i aria-hidden="true" class="icon-services"></i>
      </span>
      <span>What is it?</span>
    </a>
  </li>
</ul>
</nav>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<div id="section-2">
  <div class="content-wrapper w70">
    <h1>What is it exactly?</h1>
    <p>test.test.test.test.test.test.test.test.test.test.test.test.test.</p>
    <p>test.test.test.test.test.test.test.test.test.test.test.test.test.</p>
    <p>test.test.test.test.test.test.test.test.test.test.test.test.test.</p>
    <p>test.test.test.test.test.test.test.test.test.test.test.test.test.</p>
  </div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>

 

JavaScriptの実装は不要です。するとこのようにつくることができました。やじるし箇所をクリックすると。

このようにスクロールします。

 

デザインをしっかりやらないと非常にシンプルですね。w
Demoサイトのデザインを参考に自分ならではのサイトを作ってみてください。フルスクリーンデザインにピッタリです。