トップに戻るボタンを作成する方法：ページのトップに戻るボタン

CSSを使って「トップに戻る」ボタンを作成する方法を学びます。

自分で試してみる

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

第1歩 - HTMLの追加：

ボタンを作成し、そのボタンをクリックするとユーザーがページのトップに移動します：

<button onclick="topFunction()" id="myBtn" title="トップに移動">トップ</button>

第2歩 - CSSの追加：

ボタンのスタイルを設定：

#myBtn {
  display: none; /* デフォルトで非表示 */
  position: fixed; /* 固定/粘性定位 */
  bottom: 20px; /* ページの底部に配置 */
  right: 30px; /* ページの右側から30pxに配置 */
  z-index: 99; /* 重ね合わせを避けるために */
  border: none; /* 枠線を削除 */
  outline: none; /* 輪郭を削除 */
  background-color: red; /* 背景色を設定 */
  color: white; /* テキストの色 */
  cursor: pointer; /* マウスオーバー時のカーソルを追加 */
  padding: 15px; /* 少しのインセット */
  border-radius: 10px; /* 角丸 */
  font-size: 18px; /* 字体サイズを増加 */
}
#myBtn:hover {
  background-color: #555; /* マウスオーバー時に濃いグレーの背景を追加 */
}

第3ステップ - JavaScript を追加：

// ボタンを取得：
let mybutton = document.getElementById("myBtn");
// ユーザーがドキュメントのトップから20px下にスクロールしたとき、ボタンを表示します
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}
// ユーザーがボタンをクリックしたとき、ドキュメントのトップにスクロールします
function topFunction() {
  document.body.scrollTop = 0; // サファリ用
  document.documentElement.scrollTop = 0; // 适用于 Chrome、Firefox、IE 和 Opera ブラウザ
}

自分で試してみる