Div Scroll On Click

by anoopsuda

HTML

<div class="scroll-box" id="ai-submission-assistant-body-scroll">
    <p>Dummy line 1</p>
    <p>Dummy line 2</p>
    <p>Dummy line 3</p>
    <p>Dummy line 4</p>
    <p>Dummy line 5</p>
    <p>Dummy line 1</p>
    <p>Dummy line 2</p>
    <p>Dummy line 3</p>
    <p>Dummy line 4</p>
    <p>Dummy line 5</p>
    <p>Dummy line 1</p>
    <p>Dummy line 2</p>
    <p>Dummy line 3</p>
    <p>Dummy line 4</p>
    <p>Dummy line 5</p>
    <p>Dummy line 1</p>
    <p>Dummy line 2</p>
    <p>Dummy line 3</p>
    <p>Dummy line 4</p>
    <p>Dummy line 5</p>
</div>

<button onclick="scrollToBottom()">Scroll To Bottom</button>

CSS

.scroll-box {
        width: 300px;
        height: 200px;
        border: 1px solid #444;
        overflow-y: auto;
        padding: 10px;
        scroll-behavior: smooth; /* Smooth scrolling */
        font-family: Arial, sans-serif;
    }

    button {
        margin-top: 10px;
        padding: 8px 14px;
        background: #007bff;
        border: none;
        color: white;
        cursor: pointer;
        border-radius: 6px;
    }

JavaScript

function scrollToBottom() {
    const box = document.getElementById("ai-submission-assistant-body-scroll");
    box.scrollTop = box.scrollHeight;
}