2021-05-09

【JavaScript】トップにスクロールするボタンを作成する方法。

JavaScript,プログラミング

こんにちは、ダイキです。
今回は、JavaScript でボタンを押すと、トップにスクロールして戻ってくるイベントを作成していきます。
外部ファイルを取り込むと、簡単に作成できる方法もあるのですが、普通に書いてみます。

HTMLです。【JavaScript】トップにスクロールするボタンを作成する方法。


<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header>
    <ul>
      <li>メニュー1</li>
      <li>メニュー2</li>
      <li>メニュー3</li>
      <li>メニュー4</li>
      <li>メニュー5</li>
    </ul>
  </header>

  <div id="js-scroll-top" class="scroll-top">↑</div>

  <script src="script.js"></script>
</body>

</html>

CSSです。【JavaScript】トップにスクロールするボタンを作成する方法。


body {
  position: relative;
  height: 1500px;
  margin: 0;
}
header {
  height: 80px;
  line-height: 80px;
  background-color: #333;
  color: #fff;
}
ul {
  display: flex;
  justify-content: space-around;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
}
li {
  list-style: none;
}

.scroll-top {
  position: absolute;
  right: 35px;
  bottom: 30px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  background-color: #333;
  color: #fff;
  text-align: center;
  cursor: pointer;
}

JavaScriptです。【JavaScript】トップにスクロールするボタンを作成する方法。


// スクロールトップボタン
scrollTop("js-scroll-top", 300);

function scrollTop(el, duration) {
  const target = document.getElementById(el);
  target.addEventListener('click', () => {
    let currentY = window.pageYOffset; // 現在のスクロール位置を取得
    let step = duration/currentY > 1 ? 10 : 100; // 三項演算子
    let timeStep = duration/currentY * step; // スクロール時間
    let intervalId = setInterval(scrollUp, timeStep);

    function scrollUp() {
      currentY = window.pageYOffset;
      if (currentY === 0) {
        clearInterval(intervalId); // ページ最上部に来たら終了
      } else {
        scrollBy(0, -step); // step分上へスクロール
      };
    };
  });
};