AnimateScrollをクリックイベントにまとめてバインド

jQueryのAnimateScrollプラグインの呼び出しを、クリックイベントにまとめてバインドし、スムーズなスクロールのページ内リンクを実装するサンプル。

実装例(サンプル)

実装例(サンプル)の動作について

  • 「サンプルH2-Aへ」をクリックすると、「サンプルH2-A」までスクロールする。
  • 「サンプルH2-Bへ」をクリックすると、「サンプルH2-B」までスクロールする。
  • 「サンプルH2-Cへ」をクリックすると、「サンプルH2-C」までスクロールする。
  • 「body要素へ」をクリックすると、「body要素」までスクロールする。

実装例(サンプル)のソースコード

読み込み

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="animatescroll.min.js"></script>

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="animatescroll.js-master/animatescroll.min.js"></script>
    <script>
    <!--
    jQuery( function() {
        jQuery('#linkInThePage > li > a').click( function () {
            var hrefValue = jQuery(this).attr( 'href' );
            jQuery(hrefValue).animatescroll();
        } );
        jQuery('.toTheTop').click( function () {
            jQuery('body').animatescroll();
        } );
    } );
    // -->
    </script>
</head>
<body>
    <h1>サンプル</h1>
    <ul id="linkInThePage">
        <li><a href="#h2-a">サンプルH2-Aへ</a></li>
        <li><a href="#h2-b">サンプルH2-Bへ</a></li>
        <li><a href="#h2-c">サンプルH2-Cへ</a></li>
    </ul>
    <h2 id="h2-a">サンプルH2-A</h2>
    <p>1行目。</p>
    <p>2行目。</p>
    <p>3行目。</p>
    <p>4行目。</p>
    <p>5行目。</p>
    <p>6行目。</p>
    <p>7行目。</p>
    <p>8行目。</p>
    <p>9行目。</p>
    <p>10行目。</p>
    <p>11行目。</p>
    <p>12行目。</p>
    <p>13行目。</p>
    <p>14行目。</p>
    <p>15行目。</p>
    <p>16行目。</p>
    <p>17行目。</p>
    <p>18行目。</p>
    <p>19行目。</p>
    <p>20行目。</p>
    <h2 id="h2-b">サンプルH2-B</h2>
    <p>1行目。</p>
    <p>2行目。</p>
    <p>3行目。</p>
    <p>4行目。</p>
    <p>5行目。</p>
    <p>6行目。</p>
    <p>7行目。</p>
    <p>8行目。</p>
    <p>9行目。</p>
    <p>10行目。</p>
    <p>11行目。</p>
    <p>12行目。</p>
    <p>13行目。</p>
    <p>14行目。</p>
    <p>15行目。</p>
    <p>16行目。</p>
    <p>17行目。</p>
    <p>18行目。</p>
    <p>19行目。</p>
    <p>20行目。</p>
    <h2 id="h2-c">サンプルH2-C</h2>
    <p>1行目。</p>
    <p>2行目。</p>
    <p>3行目。</p>
    <p>4行目。</p>
    <p>5行目。</p>
    <p>6行目。</p>
    <p>7行目。</p>
    <p>8行目。</p>
    <p>9行目。</p>
    <p>10行目。</p>
    <p>11行目。</p>
    <p>12行目。</p>
    <p>13行目。</p>
    <p>14行目。</p>
    <p>15行目。</p>
    <p>16行目。</p>
    <p>17行目。</p>
    <p>18行目。</p>
    <p>19行目。</p>
    <p>20行目。</p>
    <p><a class="toTheTop">body要素へ</a></p>
</body>
</html>

クリックイベントにまとめてバインドしているのは、head要素内の下記の部分。

<script>
<!--
jQuery( function() {
    jQuery('#linkInThePage > li > a').click( function () {

        // クリックしたa要素のhref属性値を取得し、変数hrefValueに代入している。
        var hrefValue = jQuery(this).attr( 'href' );

        // 変数hrefValueの値をセレクターとして使用する。
        jQuery(hrefValue).animatescroll();

    } );
    jQuery('.toTheTop').click( function () {
        jQuery('body').animatescroll();
    } );
} );
// -->
</script>

スポンサード リンク

カテゴリー: AnimateScroll, JavaScript, jQuery, プラグイン パーマリンク