I am using Boostrap and JQuery in an ASP.NET webpage for an accordion type operation. I want a button to open a specific card and then smooth scroll it to the top of the browser window. It works pretty well in my development environment and using F12 with all of the possible devices but when it gets to the real world it's operation is erratic and inaccurate and on IOS it's ridiculous.

I am finding it difficult to troubleshoot because it works in my development environment. I have used Console.Log and I do see wildly different values in the real world. The following code is at the bottom of my .aspx body tag.

     $(document).ready(function () {
          $("#getting").click(function () {

              $("#collapse5").collapse("show");
              $('html, body').animate({
                  scrollTop: $("#collapse5").offset().top
              }, 1000);


          });
          $("#begin").click(function () {

              //$(window).scrollTo(document.getElementById('collapseFive'), 1000);

              console.log("before " + $("#collapseFive").offset().top);
              window.scrollTo({
                  top: $("#collapseFive").offset().top,
                  left: 0,
                  behavior: 'smooth'
              });
              $("#collapseFive").collapse("show");
              console.log("After " + $("#collapseFive").offset().top);
          });
      });

Where collapse5 is the ID of my accordion card and getting is the ID of my button. I have tried many different scroll functions and I have tried moving the collapse in front or behind the scroll code. Above are a few that I tried. I feel like it is some kind of timing and that my development server is just kind to it or too slow to have the problem.

I would also say that it doesn't always work well in the dev env as in some scroll options things toward the top of the page sometimes do not scroll all the way to the top.

I really just want it to put the top of the card at the top of the browser and I feel like it should be a lot easier.

I need also to enable input on open cards and disable input on closed cards. In case this is the cause, here is the code I am using to enable input in open cards and there is also similar code to disable on hide. This is working well to quell issues with required fields and ASP.NET single form requirement but maybe there is a cascade effect or something.

    $("#collapse5").on("show.bs.collapse", function (e) {
        $(this).find('input').prop('disabled', false);
        $(this).find('button').prop('disabled', false);
    });

I am using Visual Studio 2015, JQuery 3.6, with boostrap 4.3.1,

Thanks, n0npr0phet