🔰scroll smoothly

🔰 JS ⟩ browser ⟩ DOM ⟩ types ⟩ Window ⟩ scroll ⟩ smoothly

💈範例

💾 replit: scroll smoothly

// heights of the document and viewport.
const doc = { height: document.documentElement.offsetHeight };
const viewport = { height: window.innerHeight };
const scrollOffsetY = doc.height - viewport.height;

// scroll to bottom smoothly
document.querySelector('#btn').onclick = () => {
    window.scrollTo({
        left: 0, top : scrollOffsetY,
        behavior: "smooth",    // ⭐️ scroll smoothly
    });
};

// scroll to top smoothly
document.querySelector('#btn2').onclick = () => {
    window.scrollTo({
        left: 0, top : 0,
        behavior: "smooth",    // ⭐️ scroll smoothly
    });
};

📗 參考

• JavaScript: The Definitive Guide (15.5 Document Geometry and Scrolling)