スクロールインジケーターを使ってページ内ナビゲーションを実装しよう！

<div class="scroll-indicator">
  <span>Scroll</span>
  <div class="arrow"></div>
</div>

<section id="section1">
  <h2>Section 1</h2>
  <p>Content of Section 1...</p>
</section>

<section id="section2">
  <h2>Section 2</h2>
  <p>Content of Section 2...</p>
</section>

<section id="section3">
  <h2>Section 3</h2>
  <p>Content of Section 3...</p>
</section>

html {
  scroll-behavior: smooth; /* スムーズスクロールを有効にする */
}

body {
  font-family: Arial, sans-serif; /* デフォルトのフォントを指定 */
  line-height: 1.6; /* 行の高さを1.6倍に設定 */
  margin: 0;
  padding: 0;
}

.scroll-indicator {
  position: fixed; /* 画面に固定される位置 */
  bottom: 30px; /* 画面下からの距離 */
  left: 50%; /* 画面の中央に配置 */
  transform: translateX(-50%); /* 中央寄せ */
  text-align: center; /* テキストを中央揃え */
  z-index: 1000; /* 最前面に表示 */
  opacity: 1; /* 初期状態は表示 */
  transition: opacity 0.3s ease; /* フェードイン・アウトのアニメーション */
}

.scroll-indicator.hidden {
  opacity: 0; /* 非表示時は透明にする */
}

.scroll-indicator span {
  display: block; /* ブロック要素として表示 */
  font-size: 24px; /* フォントサイズ */
  margin-bottom: 5px; /* 下のマージン */
  color: #555; /* テキストの色 */
}

.arrow {
  width: 24px; /* 矢印の幅 */
  height: 24px; /* 矢印の高さ */
  border: solid #555; /* 矢印の色と太さ */
  border-width: 0 2px 2px 0; /* 矢印の形状 */
  transform: rotate(45deg); /* 矢印を反時計回りに45度回転 */
  margin: -10px auto 0; /* 中央揃え */
  animation: arrowMove 1s infinite; /* 矢印のアニメーション */
}

@keyframes arrowMove {
  0%, 100% {
    transform: translateY(0) rotate(45deg); /* 初期と最終の位置 */
  }
  50% {
    transform: translateY(6px) rotate(45deg); /* 50%の位置 */
  }
}

section#section1 {
  height: 100vh; /* ビューポートの高さに設定 */
  padding: 100px 20px; /* 上下左右のパディング */
  background-color: #f4f4f4; /* 背景色 */
}

section#section2,
section#section3 {
  height: 50vh; /* ビューポートの高さに設定 */
  padding: 100px 20px; /* 上下左右のパディング */
  background-color: #f4f4f4; /* 背景色 */
}

section:nth-of-type(even) {
  background-color: #fff; /* 偶数のセクションの背景色 */
}

window.addEventListener("scroll", function() {
  // #section1 の要素を取得
  var section1 = document.querySelector("#section1");

  // #section1 の下端の位置を計算する
  var section1Bottom = section1.offsetTop + section1.offsetHeight;

  // 現在のスクロール位置を取得
  var scrollPosition = window.scrollY + window.innerHeight;

  // スクロール位置が #section1 の下端よりも下にあれば、スクロールインジケーターを非表示にする
  if (scrollPosition > section1Bottom) {
    scrollIndicator.classList.add("hidden");
  } else {
    scrollIndicator.classList.remove("hidden");
  }
});