今回はJQueryでスムーズスクロールする表現についてです。
通常、ページ内リンクをする場合
1 |
<div id="link"></div> |
というIDに
1 |
<a href="#link"></a> |
というリンクを指定してページ内の移動を指定するのですが。
この状態のままだとクリックした時の動きが急なので見づらく、ページを見ている側に対して優しくありません。
それに対してjQueryを使うことによって下に流れるようなスムーズなスクロール表現ができます。
まずhead内にJQueryを読み込みます。
1 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> |
その直下にスクリプトを書きます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script> //スムーズスクロール jQuery(function(){ // #で始まるアンカーをクリックした場合に処理 jQuery('a[href^=#]').click(function() { // スクロールの速度 var speed = 500; // ミリ秒 // アンカーの値取得 var href= jQuery(this).attr("href"); // 移動先を取得 var target = jQuery(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 var position = target.offset().top; // スムーススクロール jQuery('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); }); </script> |
これで完成です。
設定としては下記の箇所
1 2 |
// スクロールの速度 var speed = 500; // ミリ秒 |
関数「speed」内の数字を変えることによってスクロール速度を変える事ができます。
コメント