滾動后如何使滾動到頂部按鈕出現

Question

這就是我在正文中包含按鈕的方式：

<?php require_once('scrollToTop.php'); ?>

---

這是我的滾動 tTo Top.php 文件：

<div class="btnScrollToTop" data-scroll="up" type="button">
<img src="images/paudie_scroll_top_icon.jpg" alt="">

---

這是按鈕的 CSS：

.btnScrollToTop {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 50px;
    width: 50px;
    border: none;
    z-index: 99;
}

---

這是包含在 php 頁腳中的我的 js 文件：

<script src="js/scroll.js"></script>

// JavaScript Document    
const btnScrollToTop = document.querySelector(".btnScrollToTop");

btnScrollToTop.addEventListener("click", function() {
    window.scrollTo({
        top: 0,
        left: 0,
        behavior: "smooth"
        });
        
    });

---

經過各種嘗試后，我無法讓他的按鈕只出現一個，該按鈕從頁面頂部滾動 20 像素。

請幫忙。

Answer 1

要執行您需要的操作，您可以檢索當前的 window 滾動條 position，檢查它是否高於 20 並使用它來切換按鈕的display state：

 const btnScrollToTop = document.querySelector(".btnScrollToTop"); // scroll to top of page when button clicked btnScrollToTop.addEventListener("click", e => { window.scrollTo({ top: 0, left: 0, behavior: "smooth" }); }); // toggle 'scroll to top' based on scroll position window.addEventListener('scroll', e => { btnScrollToTop.style.display = window.scrollY > 20? 'block': 'none'; });

 h3 { margin: 0 0 1000px; }.btnScrollToTop { position: fixed; right: 20px; bottom: 20px; width: 50px; border: none; z-index: 99; display: none; }

 <h3>Scroll down...</h3> <div class="btnScrollToTop" data-scroll="up" type="button"> <img src="images/paudie_scroll_top_icon.jpg" alt="Scroll to top" /> </div>

Answer 2

CSS：

.btnScrollToTop { 
  position: fixed; 
  right: 20px; 
  bottom: 20px; 
  width: 50px; 
  width: 50px; 
  border: none; 
  z-index: 99; 
  opacity: 0; 
}
.btnScrollToTop.active{  
  opacity: 1; 
}

JavaScript：

const btnScrollToTop = document.querySelector(".btnScrollToTop");
btnScrollToTop.addEventListener("click", function() { 
  window.scrollTo({ top: 0, left: 0, behavior: "smooth" }); 
}); 
window.addEventListener("scroll", () => { 
  if (window.pageYOffset > 100) { 
    btnScrollToTop.classList.add("active"); 
  } else { 
    btnScrollToTop.classList.remove("active"); 
  } 
});