Блог

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

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

Визуальный: https://jsbin.com/xihosicayo/edit?js , выходной

 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))
    }