質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.55%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 812

_shizu

score 18

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

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

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

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

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

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JSの練習</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header id="header">
    <nav>
      <ul>
        <li><a href="#link_01">link_01</a></li>
        <li><a href="#link_02">link_02</a></li>
        <li><a href="#link_03">link_03</a></li>
      </ul>
    </nav>
  </header>
  <div class="all_wrapper">
    <div id="link_01" class="box">link_01</div>
    <div id="link_02" class="box">link_02</div>
    <div id="link_03" class="box">link_03</div>
  </div>
  <script type="text/javascript" src="./js/script.js"></script>
</body>
</html>
@charset "UTF-8";

/* base -------------------------------*/
html {
  font-size: 62.5%;
}
body {
  color: #333;
  font-size: 1.4rem;
  line-height: 1.5;
  font-family: "Hiragino Kaku Gothic ProN",  Meiryo,  sans-serif;
}
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
a {
  color: #333;
}
a:link, a:visited, a:hover, a:active {
  text-decoration: none;
}
a:hover {
  transition: 0.15s;
  opacity: 0.8;
}


/* style  -------------------------------*/
header {
  background: #9AA8FF;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
}
header nav ul {
  display: flex;
  height: 50px;
  width: 400px;
  margin: 0 auto;
  justify-content: space-between;
  background: #ffffff;
}
header nav ul li {
  width: 300px;
}
header nav ul li:last-of-type a {
  border-width: 2px;
}
header nav ul li a {
  color: #ffffff;
  display: block;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-width: 2px 0 2px 2px;
  background: #9AA8FF;
}
header nav ul li:not(:last-of-type) a {
  border-left: 1px solid #fff;
}
header nav ul li:last-of-type a {
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}


.all_wrapper {
  width: 400px;
  margin: 100px auto 0;
  position: relative;
}
.box {
  height: 500px;
  margin-top: 30px;
  margin-bottom: 30px;
  border: 3px solid #9AA8FF;
  padding: 30px;
}
.box:nth-of-type(2) {
  background: #9AA8FF;
}
window.onload = function() {
  var head = document.getElementById('header');
  var headH = head.offsetHeight;
  var headL = head.querySelectorAll('a[href^="#"]');
  for (var i = 0; i < headL.length; i++) {
    headL[i].addEventListener('click', function(e) {
      e.preventDefault();
      var headI = document.getElementById(this.getAttribute("href").replace('#', ''));
      var headIY = headI.getBoundingClientRect().top + window.pageYOffset - headH;
      function headMove() {
        var headM = window.scrollTo(0, headIY - headH / 2);
      }
      var headMoveT =  headMove();
      setTimeout(function() {}, 5000);
    });
  }
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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

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

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

window.onload = function() {
  // 外からもintervalを解除できるよう、外側スコープにタイマーやターゲット変数を用意する
  let timerTimeout = null,
    timerInterval = null
    targetPos = 0,
    interValPos = 0;
  const animationTime = 5000;
    fps = 1000 / 60;


  var head = document.getElementById('header');
  var headH = head.offsetHeight;
  var headL = head.querySelectorAll('a[href^="#"]');

  for (var i = 0; i < headL.length; i++) {
    headL[i].addEventListener('click', function(e) {
      e.preventDefault();
      var headI = document.getElementById(this.getAttribute("href").replace('#', ''));
      var headIY = headI.getBoundingClientRect().top + window.pageYOffset - headH;

      // 最終的な到達点と、一回の実行でどれだけ進めばいいかを外側変数に格納
      targetPos = (headIY - headH) / 2;
      interValPos = (headI.getBoundingClientRect().top - window.pageYOffset - headH) / (animationTime / fps);

      // タイマーが生きていた時のために解除しておく
      if (timerInterval) {
        clearInterval(timerInterval);
      }
      if (timerTimeout) {
        clearTimeout(timerTimeout);
      }

      // 繰り返しを実行する
      timerInterval = setInterval(function(){
        if (window.pageYOffset != targetPos) {
          window.scrollTo(0, window.pageYOffset + interValPos);
        }
      }, fps);

      // アニメーション終了時間時にインターバルを解除する
      timerTimeout = setTimeout(function(){
        if (timerInterval) {
          clearInterval(timerInterval);
        }
        if (window.pageYOffset != targetPos) {
          window.scrollTo(0, targetPos);
        }
      }, animationTime);
    });
  }
}

すみません、検証はしていないため、数値など微調整が必要かもしれません。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/23 01:32

    ご回答ありがとうございます。
    こちらのコードを試させていただいたところ、微調整をすればスムーススクロールができそうです。
    ありがとうございました!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.55%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる