How can i scroll to the new element that’s been added

Aim: Build a chat website using json, js and html, css

CODE: chatroom.js

document.addEventListener('DOMContentLoaded', () => {
    const commentsDiv = document.querySelector('.chats');
    const commentArea = document.getElementById('comment-area');
    const sendButton = document.getElementById('send-button');
    const clearNameButton = document.getElementById('clear-name-button');

    const socket = io();

    let userName = localStorage.getItem('userName');

    if (!userName) {
        userName = prompt('Enter your name:');
        if (userName) {
            localStorage.setItem('userName', userName);
        } else {
            alert('Name is required to participate in the chat.');
            return;
        }
    }

    function displayComment(name, time, text, isNew = false) {
        const commentElement = document.createElement('div');
        commentElement.className = 'comment';
        commentElement.innerHTML = `
            <div class="name-time">${name} ${time}</div>
            <div class="text">${text}</div>
        `;
        commentsDiv.appendChild(commentElement);

        if (isNew) {
            setTimeout(() => {
                commentElement.classList.add('animate__animated', 'animate__fadeIn');
                const y = commentElement.getBoundingClientRect().top + window.scrollY;
                window.scroll({
                    top: y,
                    behavior: 'smooth'
                });
            }, 50);
        }
    }

    async function loadComments() {
        try {
            const response = await fetch('/api/comments');
            if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
            const comments = await response.json();
            commentsDiv.innerHTML = '';
            comments.forEach(comment => displayComment(comment.name, comment.time, comment.text));
        } catch (error) {
            console.error('Error loading comments:', error);
        }
    }

    sendButton.addEventListener('click', async () => {
        const comment = commentArea.value.trim();
        if (comment) {
            const time = new Date().toLocaleTimeString();
            try {
                const response = await fetch('/api/comments', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ name: userName, time, text: comment })
                });
                if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
                commentArea.value = '';
            } catch (error) {
                console.error('Error posting comment:', error);
            }
        } else {
            alert('Please enter a comment.');
        }
    });

    clearNameButton.addEventListener('click', () => {
        localStorage.removeItem('userName');
        location.reload();
    });

    socket.on('updateComments', (comments) => {
        commentsDiv.innerHTML = '';
        comments.forEach(comment => displayComment(comment.name, comment.time, comment.text));
    });

    socket.on('newComment', (comment) => {
        displayComment(comment.name, comment.time, comment.text, true);
    });

    socket.emit('refreshComments');
    loadComments();
});

What’s the error: I tried using scroll to view but it isnt working properly,

What i did: Tried chatgpt, Got recoommended using manual stuff,

fixed or no?: The scroll didnt got fixed but i got extra errors lol

What i want to do:

I want to add scroll to new to the new comments so that the new comments would come to view with animation,

but i tried it with the help of chatgpt but it ended up repeating the animtion every 0.5 seconds to the whole page