# scroll smoothly

[🔰 JS](https://lochiwei.gitbook.io/web/js) ⟩ [browser](https://lochiwei.gitbook.io/web/browser) ⟩ [DOM](https://lochiwei.gitbook.io/web/browser/dom) ⟩ [types](https://lochiwei.gitbook.io/web/browser/dom/type) ⟩ [Window](https://lochiwei.gitbook.io/web/browser/dom/type/window) ⟩ [scroll](https://lochiwei.gitbook.io/web/browser/dom/type/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 %}