title: Why is scroll-behavior:smooth not working but javascript window.scroll smooth is?
body: <p>I have a navigation bar to scroll down to anchor elements. The navbar is inside the body.</p>
  
  <p>My css :</p>
  
  <pre><code>body {
          scroll-behavior: smooth;
  }
  </code></pre>
  
  <p>In the page, I also use some javascript. One is a javascript with the following function to navigate to other page elements  :</p>
  
  <pre><code>window.scroll({
      top : pos,
      left : 0,
      behavior : 'smooth'
  });
  </code></pre>
  
  <p>With Chrome, when I call the javascript function, the scroll is smooth. But when I navigate to anchors through navigation bar links, it is not smooth.</p>
  
  <p>Would someone care to explain me why ?</p>
  
  <p>Also with Firefox both scroll from navigation bar &amp; javascript function are smooth. I think it's a bit wierd that one work but not the other.</p>
  
  <p>EDIT : my workaround is as follow (vanilla JS / works with all modern browsers) :</p>
  
  <pre><code>    let pos = document.querySelector(element).offsetTop;
      if ('scrollBehavior' in document.documentElement.style) { //Checks if browser supports scroll function
          window.scroll({
              top : pos,
              left : 0,
              behavior : 'smooth'
          });
      } else {
          smoothScrollTo(0, pos, 500); //polyfill below
      }
  </code></pre>
  
  <p>And the fallback scroll function :</p>
  
  <pre><code>window.smoothScrollTo = function(endX, endY, duration) {
          let startX = window.scrollX || window.pageXOffset,
          startY = window.scrollY || window.pageYOffset,
          distanceX = endX - startX,
          distanceY = endY - startY,
          startTime = new Date().getTime();
  
          // Easing function
          let easeInOutQuart = function(time, from, distance, duration) {
              if ((time /= duration / 2) &lt; 1) return distance / 2 * time * time * time * time + from;
              return -distance / 2 * ((time -= 2) * time * time * time - 2) + from;
          };
  
          let timer = window.setInterval(function() {
              let time = new Date().getTime() - startTime,
              newX = easeInOutQuart(time, startX, distanceX, duration),
              newY = easeInOutQuart(time, startY, distanceY, duration);
              if (time &gt;= duration) {
                  window.clearInterval(timer);
              }
              window.scrollTo(newX, newY);
          }, 1000 / 60); // 60 fps
      };
  </code></pre>