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

投稿日: 2014年12月17日 作成者: alphasis

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

実装例（サンプル）

実装例（サンプル）の動作について

  • 「サンプルH2-Ａへ」をクリックすると、「サンプルH2-Ａ」までスクロールする。
  • 「サンプルH2-Ｂへ」をクリックすると、「サンプルH2-Ｂ」までスクロールする。
  • 「サンプルH2-Ｃへ」をクリックすると、「サンプルH2-Ｃ」までスクロールする。
  • 「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></li>
        <li><a href="#h2-b">サンプルH2-Ｂへ</a></li>
        <li><a href="#h2-c">サンプルH2-Ｃへ</a></li>
    </ul>
    <h2 id="h2-a">サンプルH2-Ａ</h2>
    <p>１行目。</p>
    <p>２行目。</p>
    <p>３行目。</p>
    <p>４行目。</p>
    <p>５行目。</p>
    <p>６行目。</p>
    <p>７行目。</p>
    <p>８行目。</p>
    <p>９行目。</p>
    <p>１０行目。</p>
    <p>１１行目。</p>
    <p>１２行目。</p>
    <p>１３行目。</p>
    <p>１４行目。</p>
    <p>１５行目。</p>
    <p>１６行目。</p>
    <p>１７行目。</p>
    <p>１８行目。</p>
    <p>１９行目。</p>
    <p>２０行目。</p>
    <h2 id="h2-b">サンプルH2-Ｂ</h2>
    <p>１行目。</p>
    <p>２行目。</p>
    <p>３行目。</p>
    <p>４行目。</p>
    <p>５行目。</p>
    <p>６行目。</p>
    <p>７行目。</p>
    <p>８行目。</p>
    <p>９行目。</p>
    <p>１０行目。</p>
    <p>１１行目。</p>
    <p>１２行目。</p>
    <p>１３行目。</p>
    <p>１４行目。</p>
    <p>１５行目。</p>
    <p>１６行目。</p>
    <p>１７行目。</p>
    <p>１８行目。</p>
    <p>１９行目。</p>
    <p>２０行目。</p>
    <h2 id="h2-c">サンプルH2-Ｃ</h2>
    <p>１行目。</p>
    <p>２行目。</p>
    <p>３行目。</p>
    <p>４行目。</p>
    <p>５行目。</p>
    <p>６行目。</p>
    <p>７行目。</p>
    <p>８行目。</p>
    <p>９行目。</p>
    <p>１０行目。</p>
    <p>１１行目。</p>
    <p>１２行目。</p>
    <p>１３行目。</p>
    <p>１４行目。</p>
    <p>１５行目。</p>
    <p>１６行目。</p>
    <p>１７行目。</p>
    <p>１８行目。</p>
    <p>１９行目。</p>
    <p>２０行目。</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, プラグイン パーマリンク