Button takes two clicks to trigger event on mobile

Question

I am trying to make 'back-to-top' functionality. However, it works fine on desktop but on mobile I have to tap the button two times to make it work. How can I make the functionality works on mobile with a single click/tap? Thanks a lot in advance.

window.addEventListener("scroll", function () {
  if (window.scrollY > 150) {
    backToTop.classList.remove("invisible");
    backToTop.addEventListener("click", function () {
      document.documentElement.scrollTop = 0;
    });
  } else {
    backToTop.classList.add("invisible");
  }
});

<!-- Back To Top -->
            <a id="back-to-top"
                class="fixed z-40 w-12 h-12 sm:w-14 sm:h-14 2xl:w-16 2xl:h-16 rounded-full flex justify-center bottom-5 right-5
                        sm:bottom-7 md:bottom-10 xl:bottom-12 xl:right-8 2xl:right-10 2xl:bottom-14
                        3xl:bottom-20 3xl:right-18 invisible teritary-bg-hover secondary-bg">
                <svg class="w-5 sm:w-6 2xl:w-8" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                    viewBox="0 0 38.372 21.841">
                    <path id="Path_11" data-name="Path 11"
                        d="M21.744-3.3l18.924,20.64-1.32,1.2L21.744.008,3.8,18.544l-1.5-1.2h0Z"
                        transform="translate(-2.296 3.297)" fill="current" />
                </svg>
            </a>
     <!-- /Back To Top -->