<button>

window.scrollTo

<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() {
// 問題2. scrollToTop()関数が実行された時に、ページトップにスクロールする処理をJavascriptで書いてください
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
}


.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;
}

#scrollTop {
  position: fixed;
  bottom: 64px;
  right: 20px;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}


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


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

function scrollToTop() {
// 問題2. scrollToTop()関数が実行された時に、ページトップにスクロールする処理をJavascriptで書いてください

}


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

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

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

transition

transform

opacity

element.classList.add()

element.classList.remove()

if文

document.addEventListener()

document.getElementById()

window.pageYOffset

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

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

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

JavaScript DOM操作コース

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

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