Javascript переместить полосу прокрутки вниз, используя элемент не работает

Question

Привет всем, у меня есть HTML-код ниже, что должен позволить странице прокручиваться до элемента nextChatHolder при нажатии кнопки.

Он добавляет пузыр чата очень хорошо внизу, но я хочу, чтобы он прокручивался вниз до nextChatHolder каждый раз, когда я нажимаю кнопку.

У меня нет ошибок, и эти примеры работают автономно.Поэтому, естественно, где-то в моем javascript или css, что заставляет его не прокручиваться - и я не могу найти, что это такое!

Visual: https://jsbin.com/xihosicayo/edit?js,output

function getElementY(query) {
        return window.pageYOffset + document.querySelector(query).getBoundingClientRect().top;
    }

    function scrollToItem(item) {
        var diff = (item.offsetTop-window.scrollY)/8;

        if (Math.abs(diff) > 1) {
            window.scrollTo(0, (window.scrollY+diff));
            clearTimeout(window._TO);
            window._TO=setTimeout(scrollToItem, 30, item);
        } else {
            window.scrollTo(0, item.offsetTop);
        }
    }

    function doScrolling(element, duration) {
        var startingY   = window.pageYOffset
        var elementY    = getElementY(element)
        var targetY     = document.body.scrollHeight - elementY < window.innerHeight ? document.body.scrollHeight - window.innerHeight : elementY
        var diff        = targetY - startingY
        var easing      = function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1; }
        var start;

        if (!diff) return
            window.requestAnimationFrame(function step(timestamp) {     
                if (!start) start = timestamp;
                var time = timestamp - start;
                var percent = Math.min(time / duration, 1);

                percent = easing(percent);
                window.scrollTo(0, startingY + diff * percent);

                if (time < duration) {
                    window.requestAnimationFrame(step);
                }
            })
        }

    function newTalk(textVal, pic) {
        var my_elem = document.getElementById("nextChatHolder");
        var div = document.createElement('div');

        div.innerHTML = '<div class="animated animatedFadeInUp fadeInUp">' +
                            '<div class="chat self">' +
                                '<div class="user-photo">' +
                                    '<img src="' + pic + '">' +
                                '</div>' +
                                '<p class="chat-message">' + textVal + '</p>' +
                                '<span class="timeself">11:01 PM | Oct 11 2019</span>' +
                            '</div>' +
                        '</div>';

        my_elem.parentNode.insertBefore(div, my_elem);
        //scrollToItem(my_elem))
    }

Answer 1

Я считаю, что вы ищете:

my_elem.scrollIntoView({behavior: "smooth",block: "end"})

в качестве последней строки в newTalk.

Документация