ネイティブJSでページ内リンクのスムーススクロールを作る方法

閲覧ありがとうございます。

スムーススクロールをさせるために、「現状出来ているスクロールにかける時間」を指定することは可能なのでしょうか？

現状としては、ヘッダーをposition: fixed;でページ上部に固定した状態で、各ページ内リンク先へスクロールさせることは出来ています。
setTimeoutが使えるかと思い試したのですが、効いていません。

ネイティブJSでの良い方法がございましたら、お手数ですがお教えいただけますと幸いです。
よろしくお願い致します。

▼CodePen
https://codepen.io/0166/pen/EMLdbv?editors=0010

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>JSの練習</title>
6  <link rel="stylesheet" href="css/reset.css">
7  <link rel="stylesheet" href="css/style.css">
8</head>
9<body>
10  <header id="header">
11    <nav>
12      <ul>
13        <li><a href="#link_01">link_01</a></li>
14        <li><a href="#link_02">link_02</a></li>
15        <li><a href="#link_03">link_03</a></li>
16      </ul>
17    </nav>
18  </header>
19  <div class="all_wrapper">
20    <div id="link_01" class="box">link_01</div>
21    <div id="link_02" class="box">link_02</div>
22    <div id="link_03" class="box">link_03</div>
23  </div>
24  <script type="text/javascript" src="./js/script.js"></script>
25</body>
26</html>

css
1@charset "UTF-8";
2
3/* base -------------------------------*/
4html {
5  font-size: 62.5%;
6}
7body {
8  color: #333;
9  font-size: 1.4rem;
10  line-height: 1.5;
11  font-family: "Hiragino Kaku Gothic ProN",  Meiryo,  sans-serif;
12}
13*, *::before, *::after {
14  box-sizing: border-box;
15  margin: 0;
16  padding: 0;
17}
18li {
19  list-style: none;
20}
21a {
22  color: #333;
23}
24a:link, a:visited, a:hover, a:active {
25  text-decoration: none;
26}
27a:hover {
28  transition: 0.15s;
29  opacity: 0.8;
30}
31
32
33/* style  -------------------------------*/
34header {
35  background: #9AA8FF;
36  position: fixed;
37  top: 0;
38  left: 0;
39  width: 100%;
40  z-index: 9999;
41}
42header nav ul {
43  display: flex;
44  height: 50px;
45  width: 400px;
46  margin: 0 auto;
47  justify-content: space-between;
48  background: #ffffff;
49}
50header nav ul li {
51  width: 300px;
52}
53header nav ul li:last-of-type a {
54  border-width: 2px;
55}
56header nav ul li a {
57  color: #ffffff;
58  display: block;
59  width: 100%;
60  height: 100%;
61  display: flex;
62  justify-content: center;
63  align-items: center;
64  border-width: 2px 0 2px 2px;
65  background: #9AA8FF;
66}
67header nav ul li:not(:last-of-type) a {
68  border-left: 1px solid #fff;
69}
70header nav ul li:last-of-type a {
71  border-left: 1px solid #fff;
72  border-right: 1px solid #fff;
73}
74
75
76.all_wrapper {
77  width: 400px;
78  margin: 100px auto 0;
79  position: relative;
80}
81.box {
82  height: 500px;
83  margin-top: 30px;
84  margin-bottom: 30px;
85  border: 3px solid #9AA8FF;
86  padding: 30px;
87}
88.box:nth-of-type(2) {
89  background: #9AA8FF;
90}

javascript
1window.onload = function() {
2  var head = document.getElementById('header');
3  var headH = head.offsetHeight;
4  var headL = head.querySelectorAll('a[href^="#"]');
5  for (var i = 0; i < headL.length; i++) {
6    headL[i].addEventListener('click', function(e) {
7      e.preventDefault();
8      var headI = document.getElementById(this.getAttribute("href").replace('#', ''));
9      var headIY = headI.getBoundingClientRect().top + window.pageYOffset - headH;
10      function headMove() {
11        var headM = window.scrollTo(0, headIY - headH / 2);
12      }
13      var headMoveT =  headMove();
14      setTimeout(function() {}, 5000);
15    });
16  }
17}

行動規範の内容に同意します

回答1件

ベストアンサー

アニメーションをさせるライブラリを使わない理由はなんでしょうか？
重いからでしょうか？

ひとまず、回答させていただきます。
setTimeoutは一回しか実行されませんから、今回のようなものには不向きかと思います。
（目標に達するまでsetTimeoutを定義し続けるならあり）
スクロールをさせるために、
少しずつアニメーションさせるには、
setIntervalを使うといいかと思います。

下記でいかがでしょうか。

javascript
1window.onload = function() {
2  // 外からもintervalを解除できるよう、外側スコープにタイマーやターゲット変数を用意する
3  let timerTimeout = null,
4    timerInterval = null
5    targetPos = 0,
6    interValPos = 0;
7  const animationTime = 5000;
8    fps = 1000 / 60;
9  
10
11  var head = document.getElementById('header');
12  var headH = head.offsetHeight;
13  var headL = head.querySelectorAll('a[href^="#"]');
14
15  for (var i = 0; i < headL.length; i++) {
16    headL[i].addEventListener('click', function(e) {
17      e.preventDefault();
18      var headI = document.getElementById(this.getAttribute("href").replace('#', ''));
19      var headIY = headI.getBoundingClientRect().top + window.pageYOffset - headH;
20      
21      // 最終的な到達点と、一回の実行でどれだけ進めばいいかを外側変数に格納
22      targetPos = (headIY - headH) / 2;
23      interValPos = (headI.getBoundingClientRect().top - window.pageYOffset - headH) / (animationTime / fps);
24      
25      // タイマーが生きていた時のために解除しておく
26      if (timerInterval) {
27        clearInterval(timerInterval);
28      }
29      if (timerTimeout) {
30        clearTimeout(timerTimeout);
31      }
32
33      // 繰り返しを実行する
34      timerInterval = setInterval(function(){
35        if (window.pageYOffset != targetPos) {
36          window.scrollTo(0, window.pageYOffset + interValPos);
37        }
38      }, fps);
39
40      // アニメーション終了時間時にインターバルを解除する
41      timerTimeout = setTimeout(function(){
42        if (timerInterval) {
43          clearInterval(timerInterval);
44        }
45        if (window.pageYOffset != targetPos) {
46          window.scrollTo(0, targetPos);
47        }
48      }, animationTime);
49    });
50  }
51}
52