スクロール中だけ背景色を変える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>
</head>
<body>
    <h1>サンプル</h1>
    <p><a onclick="jQuery('#h2-a').animatescroll({onScrollStart:function(){jQuery('body').css('backgroundColor','red');},onScrollEnd:function(){jQuery('body').css('backgroundColor','#ffffff');}});">サンプルH2-Aへ</a></p>
    <p><a onclick="jQuery('#h2-b').animatescroll({onScrollStart:function(){jQuery('body').css('backgroundColor','red');},onScrollEnd:function(){jQuery('body').css('backgroundColor','#ffffff');}});">サンプルH2-Bへ</a></p>
    <p><a onclick="jQuery('#h2-c').animatescroll({onScrollStart:function(){jQuery('body').css('backgroundColor','red');},onScrollEnd:function(){jQuery('body').css('backgroundColor','#ffffff');}});">サンプルH2-Cへ</a></p>
    <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 onclick="jQuery('body').animatescroll({onScrollStart:function(){jQuery('body').css('backgroundColor','red');},onScrollEnd:function(){jQuery('body').css('backgroundColor','#ffffff');}});">body要素へ</a></p>
</body>
</html>

スポンサード リンク

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