WEBデザインテクニック|KLUTCHE

【jQuery】ページ内リンクをするするーっとスムースにスクロールするJavascript

最近ではページ内でリンクを飛ばす際には当然の仕様となっているスムーススクロールを簡単なタグで実現します。

どうだい?スムースだろ?

デモページ

個人的にこの動きが大好きです。
1時間くらいならずっとスクロールを見ていられます。
鬱の時なら半日はいけます!

HTML

<a href="#bottom">下へスムース!</a>

なにも工夫しなくて良いです。
ただ#をつけてアンカーポイントへリンクを貼るだけです。

Javascript

jQuery依存のスクリプトなので、head内でjQueryを呼び出しましょう。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

その後に以下のスクリプトを書きます。

<script type="text/javascript">
$(function(){
	$('a[href^=#]').click(function(){
		var speed = 500;
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top;
		$("html, body").animate({scrollTop:position}, speed, "swing");
		return false;
	});
});
</script>

これで、ページ内リンクであれば勝手にスムーススクロール処理をしてくれます。

var speed = 500; の部分がスクロール完了までの時間です。
数字が小さいほどシャッ!と動きます。

“【jQuery】ページ内リンクをするするーっとスムースにスクロールするJavascript” への46件のフィードバック

  1. […] 下記サイト様のサンプル等を参考にさせて頂きました。 ページ内リンクをするするーっとスムースにスクロールするJavascript jQueryでマウスホイールすると余韻が残るイージングスクロー […]

  2. […] ページ内をスムースにスクロール  Headline↑ ページ内をスムースにスクロール […]

  3. […] 【jQuery】ページ内リンクをするするーっとスムースにスクロールするJavascript […]

  4. […] 【jQuery】ページ内リンクをするするーっとスムースにスクロールするJavascript […]

  5. y_a より:

    今Web勉強中で、課題でサイト作成中の者です。
    スムーズスクロールをやりたくて、本買ったり、いろんなサイトで調べてやってたんですがどうしてもできなくて、半月くらい煩悶してました。
    が、こちらのでやっと動きました!!!!!
    超うれしかったーーーーー!!!!
    ありがとうございましたーーーーー!!!!

  6. 大川 より:

    コンニチハ。

    こちらで拝見して実装させて頂きました!
    ローカルでは見事に動くのですが
    オンライン上にあげると動かなくなってしまいます…。

    これはどういった原因が考えられますでしょうか?

    • KLUTCHE より:

      うーん。。なんでしょうか。。

      ひょっとして大川さんは、当スクリプトをWordPressに組み込んで使っているんでしょうか。
      WordPressでjQueryを使う場合は、少しコードを変更しないと動かないようです。
      http://kachibito.net/web-design/wordpress-with-jquery.html
      そうでなければ・・今のところ思い当たる節はないです。

  7. 1M より:

    30分くらいぼーっと見てた。
    Good Job!

  8. […] ページ内リンクをするするーっとスムースにスクロールするJavascript […]

  9. nuno より:

    ソースを頂いて実装させて戴きました。
    ありがとうございます^^

    デモの最下部が
    「スムース」ではなく「スームス」になっておりましたよ(小声)

  10. ハースキー より:

    はじめまして!

    ありがたく実装をさせて頂いたのですが、
    Firefoxでは未対応でしょうか!?
    よろしくお願いします。

    • KLUTCHE より:

      ご指摘ありがとうございます!
      Firefoxでも動作するよう変更しました。

      以前、jQueryのバージョンが新しい場合に動かない不具合があって、それを修正したら、今度はFirefoxで動作しなくなっていたようです。

  11. […] 【jQuery】ページ内リンクをするするーっとスムースにスクロールするJavascript | KLUTCHE […]

  12. […] 【jQuery】ページ内リンクをするするーっとスムースにスクロールするJavascript | KLUTCHE […]

  13. 新米webデザイナー より:

    はじめまして!
    スクロールをさせたくて色々調べていてこのサイトにたどり着きました。
    動きがきもちよくて、ずっと眺めてしまいます!

    いま商用サイトの製作をしているのですが、このページのスムーススクロールのコードを使うことは可能でしょうか?
    管理人さまの著作権等が発生するんでしょうか?

    • KLUTCHE より:

      是非使ってください。
      商用でも二次配布でもなんでもOKですが、不具合への責任は負いかねますので、ご了承ください。

  14. 新米webデザイナー より:

    ありがとうございます!
    jQueryって、ほんとにいろんなことができて、奥が深いですね…。
    これから、勉強していきます!

  15. より:

    はじめまして!

    きれいに動くスクロールを探してたどり着きました。
    ほんと、気持ちいい動きですね!ウットリです!!

    新米webデザイナーさんと同じように商用サイトに使用させていただいてもよろしいでしょうか?

  16. […] klutche.org/archives/536/ […]

  17. kazoo より:

    はじめまして。
    只今、jQueryを勉強中です。町会のホームページを作成中でこのページを参考にさせて頂きました。
    ありがとうございました。

  18. にく より:

    使わせて頂いてますありがとうございます。
    このコードだと簡単に上方向、下方向にスムーススクロール出来るのが素晴らしいです。
    ページトップにはスムーススクロールするけどid要素にスムーススクロールするというのは以前探した時に見つからなかったので。

    このコードですと、他のjavascriptの際にaタグでhref=”#”とし、クリックでjavascriptを動かすとしている場合に不具合というか、ページ先頭にスクロールしてしまう誤作動がおきます。

    $(“html, body”).animate({scrollTop:position}, speed, “swing”);
    return false;
    の2行を
    if(position)で

    if(position){
    $(“html, body”).animate({scrollTop:position}, speed, “swing”);
    return false;
    }
    のように囲ってあげればその誤作動は無理やりですが解消されます。

  19. sayuri より:

    おかげで、簡単にスクロール出来ました。
    ありがとうございました!

    どうだい?スムースだろう?って、最高です。
    何回もスクロールしてしまいました。w

  20. たかはし より:

    んー
    やはりこれもAndroid2.3では不具合がでますねぇ

    下から上に戻ったと見せかけて、速攻でフッターに戻されるんですよね
    どうしたものか・・・

    • KLUTCHE より:

      本当だ・・・
      上から下は行くのに
      下から上だと戻されるんですね。
      解決策を探ってみます。

  21. すぎうら より:

    はじめまして!
    スクロールをさせたくて色々調べていてこのサイトにたどり着きました。

    特定のaタグのみ、スクロールしたいのですがどうしたらいいのか分かりません。もし方法があるのならお教え願いませんか?

    • KLUTCHE より:

      Javascript の3行目
      $('a[href^=#]').click(function(){
      の部分を
      $('a[href^=#].scroll').click(function(){
      みたいに .scroll を足してやると
      class=”scroll” が付いた a のみスクロールさせることができますよ。

      • すぎうら より:

        mail返信ありがとうございます。ご教授いただいた方法で試してみたところ、特定のタグのみスムースに動く様になりました。ありがとうございます。

  22. しのだ より:

    こういうシンプルな教え方のおかげで、やっとスムーズな移動方法が理解できました。

  23. […] 【jQuery】ページ内リンクをするするーっとスムースにスクロールするJavascript […]

  24. mm より:

    わかりやすくシンプルそうだったので、利用させていただきたいのですが。。初めスルーっといったのにしばらくしたら動きません。いろいろいじってしまい、うまくいってたときのソースはわかりませんが、現状はこんな感じです。

    ↑これをhead内に読み込み、↑

    $(function(){
    $(‘a[href^=#].scroll’).click(function(){
    var speed = 500;
    var href= $(this).attr(“href”);
    var target = $(href == “#” || href == “” ? ‘html’ : href);
    var position = target.offset().top;
    $(“html, body”).animate({scrollTop:position}, speed, “swing”);
    return false;
    });
    });

    ↑これも読み込みました↑

    HTML側は、リンク元のタグに
    class”scroll”と、#gotoTopとつけ、
    リンクの飛び先にid=”gotoTop”です。

    ※コメントにありました特定のaタグのみスクロール、でやっています。

    何かお分かりになりますでしょうか。。。普通のページ内リンクは飛んでます。

  25. mm より:

    ↑これをhead内に読み込み、↑

    冒頭はこれでした。抜けたようですみません

  26. 誰? より:

    わかんないよ~;

  27. sss より:

    サンプルページ、「上へスームス!」となっていますが、
    「上へスムース!」でしょうか?

  28. […] 【【jQuery】ページ内リンクをするするーっとスムースにスクロールするJavascript | KLUTCHE】 […]

  29. 山下少年 より:

    私は、あなたが神にしか見えません。
    ありがとうございました。
    スムースも、ユーモラスで何回もクリックしました。

  30. mocomoco より:

    jQuery 1.12.3にて
    セレクタを
    $(‘a[href^=#]’)
    と記述するとSyntax errorが出て動かないため、
    $(‘a[href^=”#”]’)
    と値を引用符で囲う必要があります。

    WordPress 4.5以上を利用している場合は同梱のjQueryが1.12.3になっているため、このエラー対策が必要になります。

山下少年 へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です