【コピペで一発】jQueryを使ったスムーススクロール

jQueryを使ったスムーススクロールのコードです。

スムーススクロールを実装するときは以下のコードをそのまま<head>内にコピペしちゃってください。

 

スムーススクロール


<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="sample.css" type="text/css">
  <script type="text/jvascript" src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
 
  <!-- #リンクのスムーズスクロール -->
  <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>
  <!-- //リンクのスムーズスクロール -->
 
  <title>jQuery</title>
</head>

 

jQueryも最初に読み込んでいるのでコピペで一発です。

コメントにもある通り、#で始まるリンクをクリックしたらスムーススクロールが実行されます。

変数speedはスムーススクロールのアニメーションスピードです。好みで変更してください。