jQueryでページ内リンクをスムーズにスクロールする方法
ページ内リンクをスルスルスルーとスムーズにスクロールさせるのはもはや鉄板ですよね。
実装も簡単!コピペでOKです。
手順① jQueryを読み込む
head内にjQueryのソースを記述します。
<head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> </head>
私は面倒なので、CDNにホストされているjQueryを読み込んでいます。
jQueryをダウンロードして読み込んでもOKです。
→ jQueryファイルのダウンロード
手順②スクロール部分を記述する。
head内にスクロール部分のソースを記述します。
<!-- スムーズスクロール部分の記述 --> <script> $(function(){ // #で始まるアンカーをクリックした場合に処理 $('a[href^=#]').click(function() { // スクロールの速度 var speed = 400; // ミリ秒 // アンカーの値取得 var href= $(this).attr("href"); // 移動先を取得 var target = $(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 var position = target.offset().top; // スムーススクロール $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); }); </script>
コピペでOKです。
速度を変えたい場合は、 var speed = 400;
部分の数値をいじってあげれば変わります。
手順③ページ内リンクの記述
ページ内リンクの記述は、みなさんご存知のだと思いますが念のため。
aタグはa href="#好きなid名"
にして、移動したい要素にid="好きなid名"
と記述すればOKです。
<a href="#1">うさぎの生態が気になる方はクリック!</a>
リンク先
<div id="1">夜行性</div>
とにかくコピペの技術を持っていればできるので、ぜひぜひお試しあれ。
参考サイト:jQuery とっても簡単、ページ内リンクでスムーズスクロール | 福島県郡山市のホームページ制作、Web制作 Kyasper Web Design キャスパーウェブデザイン