> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/browser/dom/type/window/scroll/smoothly.md).

# scroll smoothly

[🔰 JS](/web/js.md) ⟩ [browser](/web/browser.md) ⟩ [DOM](/web/browser/dom.md) ⟩ [types](/web/browser/dom/type.md) ⟩ [Window](/web/browser/dom/type/window.md) ⟩ [scroll](/web/browser/dom/type/window/scroll.md) ⟩ smoothly

{% tabs %}
{% tab title="💈範例" %}
:floppy\_disk: replit: [scroll smoothly](https://replit.com/@pegasusroe/scroll-smoothly#script.js)

```javascript
// 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
    });
};
```

{% endtab %}

{% tab title="📗 參考" %}

* [ ] JavaScript: The Definitive Guide (15.5 Document Geometry and Scrolling)
  {% endtab %}
  {% endtabs %}