<?php if ( is_single() ) : ?>
  <div id="go-to-comment" class="go-to-top go-to-comment">
    <button class="go-to-top-button" type="button" aria-label="コメントへ移動する">
      <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
        <path d="M0 0h24v24H0V0z" fill="none"/>
        <path d="M21.99 4c0-1.1-.89-2-1.99-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18zM20 4v13.17L18.83 16H4V4h16zM6 12h12v2H6zm0-3h12v2H6zm0-3h12v2H6z"/>
      </svg>
    </button>
  </div>

  <script type="module">
    const button = document.getElementById('go-to-comment');
    const comment = document.getElementById('comment-area');

    button.addEventListener('click', () => {
      comment.scrollIntoView({ behavior: 'smooth' });
    });
  </script>
<?php endif; ?>