transition

transform

opacity

element.classList.add()

element.classList.remove()

if文

document.addEventListener()

document.getElementById()

window.pageYOffset

<div class="dummy-content">
  <div class="box">コンテンツ</div>
  <div class="box">コンテンツ</div>
  <div class="box">コンテンツ</div>
</div>

<button id="scrollTop" onclick="scrollToTop()">ページのトップへ</button>


function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
}

// 問題2. ページを100px移動したかで表示と非表示を切り替える処理をJavascriptで書いてください
document.addEventListener('scroll', function() {
  const scrollTopBtn = document.getElementById('scrollTop')
  if (window.pageYOffset > 100) {
    scrollTopBtn.classList.add('visible')
  } else {
    scrollTopBtn.classList.remove('visible')
  }
})


.dummy-content {
  margin: 20px;
  height: 1500px;
  background-color: #f8f8f8;
  border-top: 1px solid #ddd;
  padding: 20px;
}

.box {
  width: 100%;
  height: 400px;
  text-align: center;
  line-height: 400px;
  font-size: 1.5em;
  color: #333;
  border-radius: 10px;
  margin-bottom: 80px;
}

.box:nth-child(1) {
  background-color: #d7ebe9;
}

.box:nth-child(2) {
  background-color: #acd9d6;
}

.box:nth-child(3) {
  background-color: #73c5c1;
}

/* 問題1. .visibleクラスの追加・削除でボタンが下から出現するためのCSSを書いてください */
#scrollTop {
  position: fixed;
  bottom: 64px;
  right: 20px;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 0.5s, transform 0.5s;
}

#scrollTop.visible {
  opacity: 1;
  transform: translateY(0);
}


function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
}

// 問題2. ページを100px移動したかで表示と非表示を切り替える処理をJavascriptで書いてください


.dummy-content {
  margin: 20px;
  height: 1500px;
  background-color: #f8f8f8;
  border-top: 1px solid #ddd;
  padding: 20px;
}

.box {
  width: 100%;
  height: 400px;
  text-align: center;
  line-height: 400px;
  font-size: 1.5em;
  color: #333;
  border-radius: 10px;
  margin-bottom: 80px;
}

.box:nth-child(1) {
  background-color: #d7ebe9;
}

.box:nth-child(2) {
  background-color: #acd9d6;
}

.box:nth-child(3) {
  background-color: #73c5c1;
}

/* 問題1. .visibleクラスの追加・削除でボタンが下から出現するためのCSSを書いてください */
#scrollTop {
  position: fixed;
  bottom: 64px;
  right: 20px;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}


ボタンが指定の高さを超えたら表示される機能の実装

<button>

idセレクタ

position: fixed

bottom

right

padding

padding: 10px 20px 30px;

上記のような場合、余白は上が$(1)px、右が$(2)px、下が$(3)px、左が$(4)pxとなる。

background-color

color

border

border-radius

cursor

ボタンの配置とスタイルの設定

window.scrollTo

ページトップにスクロールする機能の実装

このレッスンでは、ユーザーがページをスクロールした際に、簡単にページのトップに戻れる機能の実装方法を学びます。
これにより、ユーザーフレンドリーなナビゲーション体験を提供する方法を習得できます。

webサイトに動きをつけたり、表示内容を切り替えたり、formの入力を制御するなど様々な処理について学んでいきます

JavaScript DOM操作コース

【実践🔥】DOM操作でUIアニメーションを実装しよう

「ページトップスクロールのアニメーション」レッスンの総復習クイズです。