ボタンで指定位置スクロール　何となくJavaScriptで遊んでみたい人用 JQueryでid指定

どうもかずきです！

手動でスクロールをするのが大変なくらい一つのページが非常に長いウェブサイトを見たことがあると思います

そのような時って大きな見出しがいくつかあってそこをクリックすると対応する場所まで瞬時にスクロールしてくれる機能を一度は見たことがあると思います

下記の動画を開いてみてください

https://gyazo.com/2d626fabeccbce388b23ced690745b66

今回はこの機能をJavaScriptのライブラリのJQueryを使って作ってみましょう

Js(コピペ用)

$(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;
  });
});

まずこの意味を解説

Js(解説用)

$(function(){
  $('a[href^="#"]').click(function(){
// この場合は#で始まるaタグリンククリックした時という意味
    var speed = 500;
// この場合は500ミリ秒つまり0.5秒でかけてスクロール
    var href= $(this).attr("href");
// html要素の定義したa[href^="#"]を取得
    var target = $(href == "#" || href == "" ? 'html' : href);
#の時とからの時はhtml,それ以外はhrefとなる　つまりidが#空だとそのページ内の遷移でリンクがあるときはリンク先に飛ぶというような意味合い
    var position = target.offset().top;
// 指定元と指定先の位置を数値で取得　positionに代入
    $("html, body").animate({scrollTop:position}, speed, "swing");
// animateメソッドで指定場所のポジション変化とスピードと種類を設定
    return false;
// 念の為urlのリンク先に行かないようにしている
  });
});

ざっとこんな感じ

次に例として簡単なHTMLを

sample.html（コピペ用）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="sample.css" type="text/css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script>
      $(function(){
        $('a[href^="#"]').click(function() {
          var speed = 500;
          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>sample</title>
  </head>
  <body>
    <h1 id="top">topです</h1>
    <ul>
      <li><a href="#1">要素A</a></li>
      <li><a href="#2">要素B</a></li>
      <li><a href="#3">要素C</a></li>
      <li><a href="#4">要素D</a></li>
    </ul>
    <div>
      ---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>
    </div>
    <div id="1">
      <h2>要素A</h2>
      <a class="button" href="#top">Top</a>
    </div>
    <div>
      ---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>
    </div>
    <div id="2">
      <h2>要素B</h2>
      <a class="button" href="#top">Top</a>
    </div>
    <div>
      ---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>
    </div>
    <div id="3">
      <h2>要素C</h2>
      <a class="button" href="top">Top</a>
    </div>
    <div>
      ---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>
    </div>
    <div id="4">
      <h2>要素D</h2>
      <a class="button" href="top">Top</a>
    </div>
        <div>
      ---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>
    </div>
  </body>
</html>

画像やその他文字列も可能

sample.html（解説用）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="sample.css" type="text/css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script>
<!-- JQueryを読み込んでJsを記述します -->
      $(function(){
        $('a[href^="#"]').click(function() {
          var speed = 500;
          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>sample</title>
  </head>
<!-- ここからHTMLの記述です -->
  <body>
<!-- トップにidを対応 -->
    <h1 id="top">topです</h1>
    <ul>
<!-- 見出し要素に#idを付与 -->
      <li><a href="#1">要素A</a></li>
      <li><a href="#2">要素B</a></li>
      <li><a href="#3">要素C</a></li>
      <li><a href="#4">要素D</a></li>
    </ul>
    <div>
<!-- スクロールの機能を実感してもらうためのカサ増しのための記述です お気になさらず-->
      ---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>
    </div>
<!-- 対応見出し　他も同様 -->
    <div id="1">
      <h2>要素A</h2>
<!-- トップへ移動するための#id指定-->
      <a class="button" href="#top">Top</a>
    </div>
    <div>
      ---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>
    </div>
    <div id="2">
      <h2>要素B</h2>
      <a class="button" href="#top">Top</a>
    </div>
    <div>
      ---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>
    </div>
    <div id="3">
      <h2>要素C</h2>
      <a class="button" href="top">Top</a>
    </div>
    <div>
      ---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>
    </div>
    <div id="4">
      <h2>要素D</h2>
      <a class="button" href="top">Top</a>
    </div>
        <div>
      ---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>---<br>
    </div>
  </body>
</html>