web

WEBデザイン

2025-10-14

300ピクセル下にスクロールしたら画面外から出てくるページトップに戻るボタンを作る

スクロールに合わせて画面内に表示させるための仕組みの学習として、300ピクセルスクロールしたら画面外からページトップに戻るボタンを作成してみようと思います。

HTMLとCSS、そしてJavascriptを使えばサクッとボタンの作成ができてしまいます。

HTML

<body>
  <div style="width:20px;background:#ccc;height:200vh;">
    test
  </div>
  <a href="#" id="pagetop" class="pagetop"></a>
</body>

CSS

html {
  scroll-behavior: smooth;
}
.pagetop {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  z-index: 9999;
  border-radius: 50%;
  background: #333;
  transform: translateY(100px);
  transition: transform 0.5s;
}
.pagetop.js-active {
  transform: translateY(0);
}
.pagetop::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  margin-top: 5px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(-45deg);
}

HTMLとCSSはこのような感じにしておきます。

HTMLは<a>タグだけ用意します。ボタンの作成は全てCSSで行われます。もしも、画像のボタンなどを置く場合は<a>タグの中に画像をおいて、CSS側のボタン描画部分を消せばOKです。

CSSはボタンの描画部分がほとんどです。Javascriptで条件を満たしたら.js-activeのCSSが追加される仕組みになります。

Javascript

// ターゲットとなるボタンのIDを設定
const pageTopButton = document.getElementById("pagetop");
// フラグの初期設定
let isFlug = false;
// 実際の動作部分
const scrollHandler = () => {
  // フラグが false の場合のみ処理する
  if (!isFlug) {  
    // ブラウザの描画タイミングに合わせて処理を実行
    window.requestAnimationFrame(() => {
      // 実際の処理はこの1行のみ
      pageTopButton.classList.toggle("js-active", window.scrollY > 300);
      // フラグを戻す
      isFlug = false;
    });
    // フラグを立てる
    isFlug = true;
  }
};
// スクロールイベントを取得したら実行
window.addEventListener("scroll", scrollHandler);

今回の肝となる部分のJavascriptです。Javascriptの書き方もちょっとだけモダンにしました。

addEventListenerでスクロールイベントを取得します。
スクロールイベントはスクロールしてる間ずっと取得され続けるので、少しでも処理回数を少なくするためにフラグで処理をONOFFするようにしています。

やることは単純で、window.scrollYが300を基準として大きかったらjs-activeをつける、小さかったら外すのトグル処理を行っています。
実際の動作部分はこの1行だけです。

基準点から上にいるのか下にいるのかで表示の位置を変えるだけの単純な仕組みです。

アニメーションを行うのはCSSで、初期位置はtransform: translateY(100px);で画面外に置いたボタンは、js-activeが追加されることでtransform: translateY(0);に上書きされ、本来表示されるべき画面内に移動することになります。

このようにHTML上での基本的なアニメーションは、条件のON、OFFを利用して動かしていくことになります。これを応用していくともっと複雑な動かし方も出来るようになります。

もしも、ホームページ制作でお困りでしたらパタパタワークスがあなたの力になれるかもしれません。ちょっとしたことでもお気軽にお問い合わせください。それではまた！