title: Javascript move down scrollbar using element not working
body: <p>Hey all I have the html code below that <strong>should</strong> allow the page to scroll all the way down to the <strong>nextChatHolder</strong> element when you push the button.</p>
  
  <p>It adds the chat bubble just fine at the bottom but I want it to scroll down to the <strong>nextChatHolder</strong> each time I press the button.</p>
  
  <p>I have no errors and these examples work standalone. So naturally there somewhere in my javascript or css that is causing it not to scroll - and I am unable to find what that it!</p>
  
  <p>Visual: <a href="https://jsbin.com/xihosicayo/edit?js,output" rel="nofollow noreferrer">https://jsbin.com/xihosicayo/edit?js,output</a></p>
  
  <pre><code>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) &gt; 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 &lt; window.innerHeight ? document.body.scrollHeight - window.innerHeight : elementY
          var diff        = targetY - startingY
          var easing      = function (t) { return t&lt;.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 &lt; duration) {
                      window.requestAnimationFrame(step);
                  }
              })
          }
  
      function newTalk(textVal, pic) {
          var my_elem = document.getElementById("nextChatHolder");
          var div = document.createElement('div');
  
          div.innerHTML = '&lt;div class="animated animatedFadeInUp fadeInUp"&gt;' +
                              '&lt;div class="chat self"&gt;' +
                                  '&lt;div class="user-photo"&gt;' +
                                      '&lt;img src="' + pic + '"&gt;' +
                                  '&lt;/div&gt;' +
                                  '&lt;p class="chat-message"&gt;' + textVal + '&lt;/p&gt;' +
                                  '&lt;span class="timeself"&gt;11:01 PM | Oct 11 2019&lt;/span&gt;' +
                              '&lt;/div&gt;' +
                          '&lt;/div&gt;';
  
          my_elem.parentNode.insertBefore(div, my_elem);
          //scrollToItem(my_elem))
      }
  </code></pre>