Saetl.net

Simple And Easy TempLate

Infinite Scrollの使い方

  1. 下記ページ右下の 「Download ZIP」 よりファイル1式をダウンロード。
  2. ダウンロードしたファイルを任意の場所にコピー。
    ファイル構成
  3. 動作させるファイル(サンプルではindex.html)にコードを記述。
    パスは上記ファイル構成の場合なので環境にあわせて変更>
    ・</body>の直前にjsファイルを読み込ませるためのコードを記述。
    <!--googleのCDN(ネットワーク経由でコンテンツを提供するサービス)よりjqueryをロード-->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
    <!--ダウンロードしたファイル-->
    <script src="js/jquery.infinitescroll.min.js"></script> 
    <!--javascript追記-->
    <script>
    $('.scroll_area').infinitescroll({
        navSelector: ".next", //リンクを囲む要素指定
        nextSelector: ".next a", //リンク要素自体指定
        itemSelector: ".post", //表示要素指定
        dataType: "html", //'html'、'php'、'json' など、読み込み先ファイル形式指定
    	animate: true, //アニメーション処理
    	extraScrollPx: 150, //アニメーションスクロール量指定。デフォルト値150
    	bufferPx: 40, //次コンテンツロードタイミング指定
    	errorCallback: function () { }, //404エラー発生時処理
    	maxPage:undefined, //読み込み上限回数
        loading: {
            finished: undefined,
            finishedMsg: "", //コンテンツ表示終了メッセージ
            msg: null,
            msgText: "", //ローディング中表示テキスト
            img: 'images/loading.gif', //ローディング中画像パス指定
            speed: 'slow',
        },
    });
    </script>
    
    ・<body></body>内にコードを記述
    <section class="scroll_area">
        <div class="post"> 
          <img src="images/1column_a_1.png" width="640" height="400" alt=""/> <br>
          <img src="images/1column_a_2.png" width="640" height="400" alt=""/> <br>
          <img src="images/1column_a_3.png" width="640" height="400" alt=""/> <br>
          <img src="images/1column_a_4.png" width="640" height="400" alt=""/> 
        </div>
        <p class="next"><a href="index2.html"></a></p>
        </section>
    

    サンプルのindex.htmlコード

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta charset="utf-8" />
    <title>Infinite Scroll</title>
    <link href="css/style.css" rel="stylesheet" />
    </head>
    
    <body>
    <div class="container">
      <section class="scroll_area">
        <div class="post"> 
          <img src="images/1column_a_1.png" width="640" height="400" alt=""/> <br>
          <img src="images/1column_a_2.png" width="640" height="400" alt=""/> <br>
          <img src="images/1column_a_3.png" width="640" height="400" alt=""/> <br>
          <img src="images/1column_a_4.png" width="640" height="400" alt=""/> 
        </div>
        <p class="next"><a href="index2.html"></a></p>
        </section>
    </div>
    <!--googleのCDN(ネットワーク経由でコンテンツを提供するサービス)よりjqueryをロード-->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
    <!--ダウンロードしたファイル-->
    <script src="js/jquery.infinitescroll.min.js"></script> 
    <!--javascript追記-->
    <script>
    $('.scroll_area').infinitescroll({
        navSelector: ".next", //リンクを囲む要素指定
        nextSelector: ".next a", //リンク要素自体指定
        itemSelector: ".post", //表示要素指定
        dataType: "html", //'html'、'php'、'json' など、読み込み先ファイル形式指定
    	animate: true, //アニメーション処理
    	extraScrollPx: 150, //アニメーションスクロール量指定。デフォルト値150
    	bufferPx: 40, //次コンテンツロードタイミング指定
    	errorCallback: function () { }, //404エラー発生時処理
    	maxPage:undefined, //読み込み上限回数
        loading: {
            finished: undefined,
            finishedMsg: "", //コンテンツ表示終了メッセージ
            msg: null,
            msgText: "", //ローディング中表示テキスト
            img: 'images/loading.gif', //ローディング中画像パス指定
            speed: 'slow',
        },
    });
    </script>
    </body>
    </html>
    

    スクロールしたら表示されるページ(index2~8.html)のコード

    <div class="post">
          <img src="images/1column_b_1.png" width="640" height="400" alt=""/> <br>
          <img src="images/1column_b_2.png" width="640" height="400" alt=""/> <br>
          <img src="images/1column_b_3.png" width="640" height="400" alt=""/> <br>
          <img src="images/1column_b_4.png" width="640" height="400" alt=""/> 
    </div>
    <p class="next"><a href="index3.html"></a></p>
  4. ファイル1式をサーバーにアップロードして設置完了。
    サンプル