# scroll smoothly

[🔰 JS](../../../../../js) ⟩ [browser](../../../..) ⟩ [DOM](../../..) ⟩ [types](../..) ⟩ [Window](..) ⟩ [scroll]() ⟩ 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 %}
