// collect all anchors; set animation time and number of frames
const anchors = [] .slice.call (document.querySelectorAll ('a [href * = "#"]')),
   animationTime = 300,
   framesCount = 20;
anchors.forEach (function (item) {
 // assign an event handler to each anchor
 item.addEventListener ('click', function (e) {
  // remove the default behavior
  e.preventDefault ();
  // for each anchor, we take the corresponding element and define its Y coordinate
  let coordY = document.querySelector (item.getAttribute ('href')). getBoundingClientRect (). top + window.pageYOffset;
  // start the interval in which
  let scroller = setInterval (function () {
   // count how much to scroll in 1 clock cycle
   let scrollBy = coordY / framesCount;
   // if the number of pixels for scrolling in 1 clock is greater than the distance to the element
   // and the bottom of the page is not reached
   if (scrollBy & gt; window.pageYOffset - coordY & amp; & amp; window.innerHeight + window.pageYOffset & lt; document.body.offsetHeight) {
    // then scroll by the number of pixels, which corresponds to one cycle
    window.scrollBy (0, scrollBy);
   } else {
    // otherwise we get to the element and exit the interval
    window.scrollTo (0, coordY);
    clearInterval (scroller);
   }
  // interval time is equal to the quotient of the animation time and the number of frames
  }, animationTime / framesCount);
 });
}); 

h2 {
 margin-bottom: 100vh;
} 

& lt; ul & gt;
& lt; li & gt; & lt; a href = "# head1" & gt; head 1 & lt; / a & gt;
 & lt; li & gt; & lt; a href = "# head2" & gt; head 2 & lt; / a & gt;
 & lt; li & gt; & lt; a href = "# head3" & gt; head 3 & lt; / a & gt;
 & lt; li & gt; & lt; a href = "# head4" & gt; head 4 & lt; / a & gt;
& lt; / ul & gt;
& lt; h2 id = "head1" & gt; heading 1 & lt; / h2 & gt;
& lt; h2 id = "head2" & gt; heading 2 & lt; / h2 & gt;
& lt; h2 id = "head3" & gt; heading 3 & lt; / h2 & gt;
& lt; h2 id = "head4" & gt; heading 4 & lt; / h2 & gt; 

Answer 3, authority 45%

Cross-platform option:

currentYPosition – defines the current scroll position

elmYPosition – defines the position of the element

smoothScroll is the function itself.

function currentYPosition () {
  // Firefox, Chrome, Opera, Safari
  if (self.pageYOffset) return self.pageYOffset;
  // Internet Explorer 6 - standards mode
  if (document.documentElement & amp; & amp; document.documentElement.scrollTop)
    return document.documentElement.scrollTop;
  // Internet Explorer 6, 7 and 8
  if (document.body.scrollTop) return document.body.scrollTop;
  return 0;
}
function elmYPosition (eID) {
  var elm = document.getElementById (eID);
  var y = elm.offsetTop;
  var node = elm;
  while (node.offsetParent & amp; & amp; node.offsetParent! = document.body) {
    node = node.offsetParent;
    y + = node.offsetTop;
  } return y;
}
function smoothScroll (eID) {
  var startY = currentYPosition ();
  var stopY = elmYPosition (eID);
  var distance = stopY & gt; startY? stopY - startY: startY - stopY;
  if (distance & lt; 100) {
    scrollTo (0, stopY); return;
  }
  var speed = Math.round (distance / 100);
  if (speed & gt; = 20) speed = 20;
  var step = Math.round (distance / 25);
var leapY = stopY & gt; startY? startY + step: startY - step;
  var timer = 0;
  if (stopY & gt; startY) {
    for (var i = startY; i & lt; stopY; i + = step) {
      setTimeout ("window.scrollTo (0," + leapY + ")", timer * speed);
      leapY + = step; if (leapY & gt; stopY) leapY = stopY; timer ++;
    } return;
  }
  for (var i = startY; i & gt; stopY; i- = step) {
    setTimeout ("window.scrollTo (0," + leapY + ")", timer * speed);
    leapY - = step; if (leapY & lt; stopY) leapY = stopY; timer ++;
  }
}

Answer taken from here

Simplified version, when you just need to scroll to a specific position

function scrollTo (element, to, duration) {
  if (duration & lt; = 0) return;
  var difference = to - element.scrollTop;
  var perTick = difference / duration * 10;
  setTimeout (function () {
    element.scrollTop = element.scrollTop + perTick;
    if (element.scrollTop === to) return;
    scrollTo (element, to, duration - 10);
  }, ten);
}

Answer taken from here

Answer 4, authority 14%

var nodeObj = document.querySelector ('. button-node');
nodeObj.scrollIntoView ({
  behavior: "smooth",
  block: "start"
});

Answer 5, authority 5%

const anim = (sel, duration) = & gt; {
 let to = document.querySelector (sel) .getBoundingClientRect (). top,
   temp;
 return (sel) = & gt; {
cancelAnimationFrame (temp);
   var start = performance.now ();
   var from = window.pageYOffset || document.documentElement.scrollTop;
   requestAnimationFrame (function step (timestamp) {
     var progress = (timestamp - start) / duration;
     1 & lt; = progress & amp; & amp; (progress = 1);
     window.scrollTo (0, from + to * progress | 0);
     1 & gt; progress & amp; & amp; (temp = requestAnimationFrame (step))
   });
 }
}