Why is my scroll to top button not working on Chrome?

I have been running the following codes on my stylesheet and .js files for scrolling to the top of the article. I saw all the resolutions given, but none worked for me. It works for the internal view of the online wysiwyg document text editing software. However, when I publish the page, I see the scroll button, which is just not clickable and does not scroll to the top.

Here’s the HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="style.css">
<div id="progress">
  <span id="progress-value">^</span>
</div>
<p>Content goes here</p>
<!-- Script -->
<script src="script.js">
</script>

CSS

/* This is for Scrollbar*/
$('body')
  .css('position', 'fixed')
  .delay(200)
  .queue(function(next) {
    $(this).css('position', 'relative');
    next();
  });
{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
html {
  scroll-behavior: smooth;
}
#progress {
  position: fixed;
  bottom: 50px;
  right: 10px;
  height: 70px;
  width: 70px;
  display: none;
  place-items: center;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
#progress-value {
  display: block;
  height: calc(100% - 15px);
  width: calc(100% - 15px);
  background-color: #ffffff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 38px;
  color: #00C3EF;
}

Javascript

//Movable scrollbar
let calcScrollValue = () => {
  let scrollProgress = document.getElementById("progress");
  let progressValue = document.getElementById("progress-value");
  let pos = document.documentElement.scrollTop;
  let calcHeight =
    document.documentElement.scrollHeight -
    document.documentElement.clientHeight;
  let scrollValue = Math.round((pos * 100) / calcHeight);
  if (pos > 100) {
    scrollProgress.style.display = "grid";
  } else {
    scrollProgress.style.display = "none";
  }
  scrollProgress.addEventListener("click", () => {
    document.documentElement.scrollTop = 0;
  });
  scrollProgress.style.background = `conic-gradient(#00c3ef ${scrollValue}%, #F0F8FF ${scrollValue}%)`;
};

window.onscroll = calcScrollValue;
window.onload = calcScrollValue;
    
var $backToTop = $(".back-to-top");
$backToTop.hide();
$(window).on('scroll', function() {
  if ($(this).scrollTop() > 100) {
    $backToTop.fadeIn();
  } else {
    $backToTop.fadeOut();
  }
});

$backToTop.on('click', function(e) {
  $("html, body").animate({scrollTop: 0}, 500);
});

Could someone please help me out!