Плавная прокрутка к якорю без jQuery

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

var $page = $('html, body');
$('a[href*="#"]').click(function() {
    $page.animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 400);
    return false;
});

Есть также код написаный на чистом javascript. Выглядит он так:

document.querySelectorAll('a[href*="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    const blockID = anchor.getAttribute('href').substr(1);
    if(document.getElementById(blockID)) {
      e.preventDefault();

      document.getElementById(blockID).scrollIntoView({
        behavior: 'smooth',
        block: 'start'
      });
    }
  });
});

что в первом, что во втором случае код срабатывает на ссылки вида:

<a href="#anchor-1">Ссылка к якорю 1</a>

и перемещает к блоку с id anchor-1

<div id="anchor-1"> ... </div>