GGRKS!

覚えきれないことはブログに書け!備忘録です。

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 キャスパーウェブデザイン