子テーマの tmp-user / footer-insert.php に下記コードを追加します。

https://notepad.pw/share/z1e5rz7qh

次に、子テーマの style.css に下記 CSS を追加します。

.go-to-comment {
  bottom: 64px;
}

これで完成です。

ただ、「トップへ戻るボタン」と同様に、ページの上部では非表示になります。ページ上部で表示する場合は、ほんの少しの変更が必要です。

また、Safari ではスムーススクロールにはなりません（スクロールがアニメーションにならない）。

@akira Akiraさんアドバイスをありがとうございます。

機能的には上手く行きました。

でもそのままだと「コメント」の場所に飛ぶので「コメントをどうぞ」の場所に飛ぶように

 const comment = document.getElementById('comment-area');

を

 const comment = document.getElementById('respond');

に変更しました。

またそのままだとこの様に表示されるので影？の消し方、ボタンの形、色、アイコンの色、アイコン自体の変更をする際のアドバイスをいただけますか？

【コピペOK!】ページトップボタンを簡単に実装する方法 (universe-web.jp)のCSSを参考に

class go-to-top-buttonのままだとトップボタンにも影響が出そうなのでgo-to-comment-buttonを作りstyle.cssに

.go-to-comment-button {
    width: 50px;
    height: 50px;
    text-align: center;
    background: #7db4e6;
    border-radius: 50%;
    line-height: 50px;
}

を足してみましたが新しくアイコンができるだけで上手く行きませんでした。

良ければアドバイスを下さい。

表示されるアイコンはこれです。

ボタンの形と色はできました。やはり

 <button class="go-to-top-button" type="button" aria-label="コメントへ移動する">

を

 <button class="go-to-comment-button" type="button" aria-label="コメントへ移動する">

に変えて

開発ツールでトップボタンのCSSを参考に

.go-to-comment-button {
  
    background-color: #ea5506;
    color: #333;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    text-align: center;
    line-height: 1;
    border-radius: 50px;
    font-size: 22px;
	
}

を足したらできました。

自分でも試行錯誤していますが、影なのか縁？の消し方、アイコンの色、アイコン自体の変更をする際のアドバイスを良ければお願いします。

まずは、takaaa さんがお書きになった CSS の削除をお願いします。また、HTML も元に戻してください。

アイコンの変更

私は SVG でアイコンを表示しましたが、どうやってアイコンを表示されたいですか？もし、Font Awesome を CSS で表示されたい場合は、HTML を下記のように変更します。

※ Cocoon 設定 > 全体タブにある「サイトアイコンフォント」で Font Awesome 5 を選択しているとします。

<div id="go-to-comment" class="go-to-top go-to-comment">
  <button class="go-to-top-button" type="button" aria-label="コメントへ移動する">
    <span class="far fa-comments"></span>
  </button>
</div>

span の class の変更で、使いたいアイコンに変更できます。アイコンは下記リンクから探せます。

https://fontawesome.com/v5/search

SVG をお使いになる場合は、<svg> タグを書き換えます。

縁とか色とか

Font Awesome を CSS で表示される場合は、下記の CSS を追加します。

.go-to-comment .go-to-top-button {
  background-color: #ea5506;
  border: none;
  border-radius: 50%;
  color: #333;
}

SVG で表示される場合は、上記の CSS に加え下記の CSS も追加します。

.go-to-comment svg {
  fill: currentColor;
}

Safari でのスムーススクロール

もし、Safari でもスムーススクロールにする場合は、以下の polyfill（非対応のブラウザでも動くようになるやつ）も読み込みます。

https://github.com/iamdustan/smoothscroll/blob/master/src/smoothscroll.js

もし、やり方がお分かりにならない場合は、ご遠慮なくご質問ください。

@akira SVGがよくわからないのでCSSでやります。

おかげで理想通りにできました。

Safari でのスムーススクロールにも挑戦してみようと思うので教えてください。

Safari への対応

 ① まず、下記リンクを開き、ctrl + A などでコードを全選択し、ペーストします。

https://raw.githubusercontent.com/iamdustan/smoothscroll/master/src/smoothscroll.js

② 次に、下記リンクを開き、① のペーストしたコードを貼り付けます。貼り付けた後に「Minify」ボタンをクリックしコードを縮小します。

https://www.toptal.com/developers/javascript-minifier/

③ 最後に、子テーマの tmp-user / footer-insert.php に追加したコードに、② の縮小したコードを貼り付けます。場所は、下記の「// この下に縮小したコードを貼り付ける」の下です。

https://notepad.pw/share/2ff3hzdt1

ちょっとした変更

子テーマの tmp-user / footer-insert.php に追加したコードの最初に、以下の部分があります。

<?php if ( is_single() ) : ?>

これをこのようにご変更ください。

<?php if ( is_single() && is_comment_open() ) : ?>

変更後は、投稿ページの編集などにあるディスカッション設定が反映されます。「コメントを許可」のチェックを外している時はコメントフォームが出力されないため、ボタンも出力しないようにする変更です。

@akira わかりやすい説明のおかげで上手くできました。（と言ってもMAC製品を持っていないので確認ができないですが。調べても製品を使うしかなさそうなので家電屋でも行って確認します。）

投稿者:: @akira

ちょっとした変更

も聞こうかなと思っていた事なので助かりました。

akiraさんアドバイスをありがとうございました。