クリックしたらページ上部へスクロール

クリックしたらページ上部へスクロールするボタンを配置した、デモページです。
「トップへ」ボタン→常に表示
「トップへ２」ボタン→少しスクロールしたら表示。

右下に「トップへ」ボタンを固定表示

HTML


              <button type="button" class="to_btn">トップへ</button>

css


              .to_btn{
                background: #E8EFCF;
                border-radius: 50%;
                cursor: pointer;
                position: fixed;
                bottom: 20px;
                right: 20px;
                width: 80px;
                height: 80px;
              }

javascript


              const btn = document.querySelector(".to_btn");
              btn.addEventListener("click", () => {
                window.scroll({
                  top: 0,
                  behavior: "smooth",
                });
              });

少しスクロールしたら「トップへ２」ボタンを固定表示

HTML


              <button type="button" class="to_btn ver2">トップへ２</button>

css


              .to_btn.ver2 {
                opacity: 0;
                bottom: -20px;
                right: 150px;
                transform: translateY(0);
                &.show {
                  opacity: 1;
                  transform: translateY(-40px);
                  transition: transform .3s, opacity .3s;
                }
              }

javascript


              const btn2 = document.querySelector(".to_btn.ver2");
              document.addEventListener("scroll", () => {
                if (window.scrollY > 500) {
                  btn2.classList.add('show');
                } else {
                  btn2.classList.remove('show');
                }
              });