HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scroll to top</title>
  <style>
    body { font-family: sans-serif; margin: 1rem; }
    #panel {
      width: 260px; height: 180px; overflow-y: auto;
      border: 1px solid #cbd5e1; border-radius: 8px; padding: 0.5rem;
    }
    p { margin: 0 0 1rem; }
    #to-top {
      position: sticky; bottom: 0; width: 100%; padding: 0.5rem;
      background: #2563eb; color: #fff; border: none; border-radius: 6px; cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="panel">
    <p>Chat message 1</p>
    <p>Chat message 2</p>
    <p>Chat message 3</p>
    <p>Chat message 4</p>
    <p>Chat message 5</p>
    <p>Chat message 6</p>
    <p>Chat message 7</p>
    <p>Chat message 8</p>
    <p>Chat message 9</p>
    <p>Chat message 10</p>
    <button type="button" id="to-top">Back to top</button>
  </div>
  <p id="status">scrollTop: 0</p>
  <script>
    var panel = document.getElementById("panel");
    var status = document.getElementById("status");
    panel.addEventListener("scroll", function () {
      status.textContent = "scrollTop: " + panel.scrollTop;
    });
    document.getElementById("to-top").addEventListener("click", function () {
      panel.scroll({ top: 0, left: 0, behavior: "smooth" });
    });
    panel.scrollTop = panel.scrollHeight;
    status.textContent = "scrollTop: " + panel.scrollTop;
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Element.scroll — back to top button (Try It)