動的に追加したアンカーリンクがスムーズスクロールしない

Question

前提・実現したいこと

Vanillaでスムーズスクロールを書いており、動的に追加したアンカーリンクにもクリックイベントを起こしたいです。

発生している問題・エラーメッセージ

・問題一つ目
ヘッダー内のアンカーリンクがスムーズスクロールしない

・二つ目
a[href^="#"] にだけイベントを起こしたい

エラーはなし

該当のソースコード

/* smooth scroll --------------------------------------------- */
  let Ease = {
    easeInOut: function (t) {
      return t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
    }
  }
  let duration = 1200;
  document.addEventListener('click', function (e) {
    trigger = e.target;
    if (trigger.tagName.toLowerCase() === 'a') { // and条件で a[href^="#"]を入れたい
      let href = trigger.getAttribute('href');
      let currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
      let targetElement = document.getElementById(href.replace('#', ''));
      if (targetElement) {
        e.preventDefault();
        e.stopPropagation();
        let targetPosition = window.pageYOffset + targetElement.getBoundingClientRect().top - 115;
        let startTime = performance.now();
        let loop = function (nowTime) {
          let time = nowTime - startTime;
          let normalizedTime = time / duration;
          if (normalizedTime < 1) {
            window.scrollTo(0, currentPosition + ((targetPosition - currentPosition) * Ease.easeInOut(normalizedTime)));
            requestAnimationFrame(loop);
          } else {
            window.scrollTo(0, targetPosition);
          }
        }
        requestAnimationFrame(loop);
      }
    }
  });
  /* smooth scroll ----------------------------------------- end */

<header>
 <a href="#link">dummy</a>  <!-- これがスムーズスクロールしない -->
</header>

<section id="link">
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
</section>

ヘッダー内以外のリンクはスムーズスクロールしました。ヘッダー内のアンカーリンクだけスムーズスクロールしません。

試したこと

なぜ、ヘッダーにだけクリックイベントが起きないのか、調べてみましたがめぼしい情報を得られませんでした。
また、and 条件で [href^="#"] を含めるのもどうすればいいのか全く分からず、お手上げです。

ご助力いただけますと大変助かります。

追記

22.01.04 追記

/* smooth scroll --------------------------------------------- */
  let Ease = {
      easeInOut: function (t) {
        return t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
      }
    },
    duration = 1200;
  function smooth(e) {
    href = this.getAttribute('href');
    targetElement = document.getElementById(href.replace('#', ''));
    if (targetElement) {
      e.preventDefault();
      e.stopPropagation();
      let currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
      let targetPosition = window.pageYOffset + targetElement.getBoundingClientRect().top - 115;
      let startTime = performance.now();
      let loop = function (nowTime) {
        let time = nowTime - startTime;
        let normalizedTime = time / duration;
        if (normalizedTime < 1) {
          window.scrollTo(0, currentPosition + ((targetPosition - currentPosition) * Ease.easeInOut(normalizedTime)));
          requestAnimationFrame(loop);
        } else {
          window.scrollTo(0, targetPosition);
        }
      }
      requestAnimationFrame(loop);
    }
  };
  let anchorLinks = [].slice.call(document.querySelectorAll('a[href^="#"]'));
  anchorLinks.forEach(function (anchorLink) {
    anchorLink.addEventListener("click", smooth, false);
  });
  /* smooth scroll ----------------------------------------- end */

こちらのコードのに変更したところ、動的に追加した（Fetch Api で追加した要素）はスムーズスクロールしませんでした。他はしています。

補足情報（FW/ツールのバージョンなど）

Firefox 最新版

Answer 1

同様な質問が、過去に存在してます。

DOMの読み込みが終わって、addEventListenerでイベントハンドラが紐づいた後、
要素をDOMに追加するとそれはaddEventListenerを行った後の新要素なので、
イベントハンドラは追加されていませんし、DOM要素を再走査してイベントハンドラに紐づけるような動きは通常は実施されませんので、自分で追加した要素にもaddEventListnerを自前で設定しなければなりません。

それを対応したコードが参考リンクにありますので、ご覧になってください。

参考リンク：動的に追加した要素にaddEventListnerを設定する方法

既に、解決済みの場合は聞き流してください。

Comments

[nekora]

回答が役になったなら回答の横の数字をポイントすると回答の評価の増減ができます。
また解決につながった回答はベストアンサーに指定できます。
この設定は個別に指定できますし、同時に指定することもできます。

[erp]

大変遅くなり申し訳ございません。高評価を押させていただきました。

リンク先を参考に、追記してみました。非同期の fetch api で読み込んだ要素には、スムーズスクロールのクリックイベントを起こすことはできないのでしょうか。少し難しく、どうすればよいのか困っております。もし可能でしたら、ご助力いただけますと大変助かります。

Answer 2

/* smooth scroll --------------------------------------------- */
  let Ease = {
      easeInOut: function (t) {
        return t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
      }
    },
    duration = 1200;
  document.addEventListener('click', function (e) {
    let trigger = e.target;
    if (trigger.tagName.toLowerCase() === 'a' && trigger.getAttribute('href').match(/^#([a-zA-Z0-9!-/:-@¥[-`{-~]*$)/)) {
      let href = trigger.getAttribute('href');
      let targetElement = document.getElementById(href.replace('#', ''));
      if (targetElement) {
        e.preventDefault();
        e.stopPropagation();
        let currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
        let targetPosition = window.pageYOffset + targetElement.getBoundingClientRect().top - 115;
        let startTime = performance.now();
        let loop = function (nowTime) {
          let time = nowTime - startTime;
          let normalizedTime = time / duration;
          if (normalizedTime < 1) {
            window.scrollTo(0, currentPosition + ((targetPosition - currentPosition) * Ease.easeInOut(normalizedTime)));
            requestAnimationFrame(loop);
          } else {
            window.scrollTo(0, targetPosition);
          }
        }
        requestAnimationFrame(loop);
      }
    }
  });
  /* smooth scroll ----------------------------------------- end */

正規表現でページ内リンクを指定して、できました。

22.01.06 追記
これだとなぜか<header>にアンカーリンクがある場合、発火しないので、以下に書き換えました。

/* smooth scroll --------------------------------------------- */
  let Ease = {
      easeInOut: function (t) {
        return t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
      }
    },
    duration = 1200;
  let smoothScrollTriggers = [].slice.call(document.querySelectorAll('a[href^="#"]'));
  smoothScrollTriggers.forEach(function (smoothScrollTrigger) {
    smoothScrollTrigger.addEventListener('click', function (e) {
      href = smoothScrollTrigger.getAttribute('href');
      e.preventDefault();
      e.stopPropagation();
      smooth();
    });
  });
  document.addEventListener('click', function (e) {
    let trigger = e.target;
    if (trigger.tagName.toLowerCase() === 'a' && trigger.getAttribute('href').match(/^#([a-zA-Z0-9!-/:-@¥[-`{-~]*$)/)) {
      href = trigger.getAttribute('href');
      e.preventDefault();
      e.stopPropagation();
      smooth();
    }
  });

  function smooth() {
    let targetElement = document.getElementById(href.replace('#', ''));
    if (targetElement) {
      let currentPosition = document.documentElement.scrollTop || document.body.scrollTop,
        targetPosition = window.pageYOffset + targetElement.getBoundingClientRect().top - 115;
      let startTime = performance.now();
      let loop = function (nowTime) {
        let time = nowTime - startTime,
          normalizedTime = time / duration;
        if (normalizedTime < 1) {
          window.scrollTo(0, currentPosition + ((targetPosition - currentPosition) * Ease.easeInOut(normalizedTime)));
          requestAnimationFrame(loop);
        } else {
          window.scrollTo(0, targetPosition);
        }
      }
      requestAnimationFrame(loop);
    }
  }
  /* smooth scroll ----------------------------------------- end */