今日の人気記事

  1. レスポンシブなメニューを作成「MeanMenu」
  2. テーブルやリストから文字列を検索「QuickSearch」
  3. 指定した要素を更新(変更)する「Refreshing an element at a set time interval」
  4. アニメ効果付きの円グラフを作成「Circliful」
  5. カウントダウン作成「Countdown」マルチ言語対応

ページ内リンクをゆっくりスクロール「Smooth Scroll」

スポンサーリンク

ページ内リンクのゆっくりスクロールを実装するプラグイン「Smooth Scroll」を紹介します。

jQueryプラグイン「Smooth Scroll」

「Smooth Scroll」は、IDや要素を指定するだけで簡単にページ内リンクのゆっくりスクロールが実装できます。

オプションでは「スクロールの速度」や「アニメ効果」を指定することもできます。

スポンサーリンク

デモをご覧ください。左サイドに固定メニューがあるので、リンクをクリックしてみてください。ゆっくりとスムーズにスクロールします。

「Smooth Scroll」のデモ

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Smooth Scrollのデモ - jQueryまとめのカルマ</title>
<meta name="description" content="Smooth Scrollのサンプル/デモでーす。">
<style type="text/css">
.container {
  margin: 40px auto;
  width: 600px;
}
.menu {
  position: fixed;
  margin-left: -200px;
  width: 140px;
}
[id*=contents] {
  height: 500px;
}
</style>
</head>
<body>
  <div class="container">
    <ul class="menu">
      <li><a href="#contents-1">めにゅ〜壱</a></li>
      <li><a href="#contents-2">めにゅ〜弐</a></li>
      <li><a href="#contents-3">めにゅ〜参</a></li>
    </ul>
    <div id="contents-1">
      壱<br />
      1111111111111111111111111111111111111111111111111111111111
    </div>
    <div id="contents-2">
      弐<br />
      22222222222222222222222222222222222222222222222222222222222
    </div>
    <div id="contents-3">
      参<br />
      3333333333333333333333333333333333333333333333333333333333
    </div>
  </div>
  <script src="http://code.jquery.com/jquery-2.0.0.js"></script>
  <script src="jquery.smooth-scroll.js"></script>
  <script>
    $(document).ready(function() {
      $('ul.menu a').smoothScroll();
    });
  </script>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)