n

HTML

CSS

JS

const scrollTopBtn = document.querySelector(".js-scrollTopBtn");
  const scrollBottomBtn = document.querySelector(".js-scrollBottomBtn");

if (!scrollTopBtn || !scrollBottomBtn) return;

// Hàm scroll về đầu
  function scrollToTop() {
    window.scrollTo({ top: 0, behavior: "smooth" });
  }

// Hàm scroll xuống cuối
  function scrollToBottom() {
    window.scrollTo({ top: document.body.scrollHeight, behavior: "smooth" });
  }

// Gán sự kiện click
  scrollTopBtn.addEventListener("click", scrollToTop);
  scrollBottomBtn.addEventListener("click", scrollToBottom);

// Hiện/ẩn nút theo vị trí cuộn
  window.addEventListener("scroll", () => {
    const scrollY = window.scrollY;
    const windowHeight = window.innerHeight;
    const pageHeight = document.documentElement.scrollHeight;

// Hiện nút Top nếu cuộn xuống hơn 200px
    if (scrollY > 200) {
      scrollTopBtn.classList.add("show");
    } else {
      scrollTopBtn.classList.remove("show");
    }

// Hiện nút Bottom nếu chưa tới cuối
    if (scrollY + windowHeight < pageHeight - 200) {
      scrollBottomBtn.classList.add("show");
    } else {
      scrollBottomBtn.classList.remove("show");
    }
  });

Trang chủ

HTML

CSS

JS