I have added the Scroll Back To Top Button in my base (index.html) template and it's working perfectly. But when I go to any other pages, the button won't work.

Can anybody figure out what's wrong?

Here is my index.html go-to-top template, and I put the same code to other page:

<div class="go-top">
  <i class="fas fa-chevron-up"></i>
</div>

main.js

  $(document).ready(function () {
  $(function () {
      // Scroll Event
      $(window).on("scroll", function () {
        var scrolled = $(window).scrollTop();
        if (scrolled > 400) $(".go-top").addClass("active");
        if (scrolled < 400) $(".go-top").removeClass("active");
      });
      // Click Event
      $(".go-top").on("click", function () {
        $("html, body").animate({ scrollTop: "0" }, 500);
      });
    });
  });```