投稿者:: @akira

ちょっとした変更

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

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

 ① まず、下記リンクを開き、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() ) : ?>

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

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

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

アイコンの変更

私は 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

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

 <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;
	
}

を足したらできました。

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

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

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

 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;
}

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

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

https://notepad.pw/share/z1e5rz7qh

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

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

これで完成です。

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

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

位置はトップボタンの上で。

調べてもトップボタン自体のカスタマイズ方法（トップへ戻るボタンをカスタマイズする！【コピペでOK】‐WordPress・Cocoon編‐ | kikiblog (blogkiki.com)）やhtmlやcssで作るやり方（【CSS】トップに戻るボタンの作り方【コピペでOK】 (csshtml.work)）もありましたが上手く行きませんでした。

htmlやcssで作るやり方では、カスタムHTML と編集画面下のカスタムCSSに書きましたが上手く行きませんでした。

いい方法はありますか？

アドバイスをよろしくお願いいたします。