スクロール中だけ背景色を変える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>
</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></p>
    <p><a onclick="jQuery('#h2-b').animatescroll({onScrollStart:function(){jQuery('body').css('backgroundColor','red');},onScrollEnd:function(){jQuery('body').css('backgroundColor','#ffffff');}});">サンプルH2-Ｂへ</a></p>
    <p><a onclick="jQuery('#h2-c').animatescroll({onScrollStart:function(){jQuery('body').css('backgroundColor','red');},onScrollEnd:function(){jQuery('body').css('backgroundColor','#ffffff');}});">サンプルH2-Ｃへ</a></p>
    <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 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, プラグイン パーマリンク