Fetch APIでインクルードした要素にクリックイベントが発火しない

Question

前提・実現したいこと

共通パーツをfetch API でインクルードしてHTMLに表示しているのですが、その要素にスクロールイベントが発火しなくて困っています。
ページトップ・ダウンボタンでページの上下にスクロールさせたいのですが、どちらを押してもページ上部に一度行ってから、下まで戻ってしまいます。

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

特になし

該当のソースコード

if (document.getElementsByClassName("page-top") != null) {
  window.addEventListener('DOMContentLoaded', function () {
    fetch('/page-top.html')
      .then(response => response.text())
      .then(data => {
        const parser = new DOMParser();
        const html = parser.parseFromString(data, "text/html");
        const p_elements = html.getElementsByClassName('page-top')[0];
        const file_area = document.getElementsByClassName("page-top")[0];
        file_area.innerHTML = p_elements.innerHTML;
      });
  });
}

// pagetop button
  var Btn = $('.page-top'),
    topBtn = $('.page-all'),
    bottomBtn = $('.page-bottom');
  Btn.hide();
  $(window).scroll(function () {
    if ($(window).scrollTop() > 300) {
      Btn.fadeIn();
    } else {
      Btn.fadeOut();
    }
  });
  Btn.on('click', topBtn, function () {
    $('html').animate({
      scrollTop: 0
    }, 1050);
    return false;
  })
  Btn.on('click', bottomBtn, function () {
    $('html').animate({
      scrollTop: $(document).height()
    }, 1050);
    return false;
  });

page-top.html

<div class="page-top">
  <a class="page-all">△</a>
  <a class="page-bottom">▽</a>
</div>

試したこと

documentに対してクリックイベントを起こすと、ボタン以外の部位を押してもスクロールされてしまって困ります。それも上部から下部まで戻ってきてしまいます。

$(document).on('click', topBtn, function () {
    $('html').animate({
      scrollTop: 0
    }, 1050);
    return false;
  });
  $(document).on('click', bottomBtn, function () {
    $('html').animate({
      scrollTop: $(document).height()
    }, 1050);
    return false;
  });

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

Firefox 最新版

Answer 1

on の第二引数に topBtn bottomBtn を指定していますが、文字列しか指定できないのでは。
これが無効扱いされ、Btn 全体にイベントの設定が反映されてしまっているように見えます。

on() | jQuery API Documentation

Btn.on('click', ".page-all", function () {
  ...
})

Btn.on('click', ".page-bottom", function () {
  ...
})

Comments

[erp]

ありがとうございます。教えていただいた通りに書き換えたところ、思ったように動きました。ありがとうございます。

Answer 2

documentに対してクリックイベントを起こすと、

document配下のその要素　と指定すれば良いです。

$(document).on(イベント,セレクタ,function(){
 　処理内容
});

動的に生成したDOM要素に対してjQueryでイベントを設定する場合
動的に追加した要素にon()でイベントを設定する仕組みの簡単な説明

Comments

[erp]

documentに対してクリックイベントを起こすと、 というのでこの方法を試していました。
これで、ボタン以外のページのどこを押してもスクロールしてしまいます。
さらに、ページ上部→下部と行ったり来たり勝手にするような挙動です。

[m.ts10806]

実際に試したコードが提示されてないのでこちらの意図と合っているか判断できません。

[erp]

追記しました。