Resetting scroll isn't working in a page with a fixed header

Whenever the cta button(Complete Form) in the page here) is clicked, it jumps a little further than the beginning of the form (the bookmark location). To fix this, a small JS function is defined to reset the scroll bar in the window. It isn't resetting the scroll.

HTML & PHP:

        <div class="center-xs connect-with-concierge-cta">
          <a href="#contact-form-wrap" id="btn" class="btn" role="button" href="javascript:void(0)" onclick="resetScrollpoint('#contact-form-wrap')" target="<?php echo $link['target']; ?>" title="<?php echo $link['title']; ?>">
            <?php echo $link['title']; ?>
          </a>
        </div>

Bookmark location:
      <?php if( $contact ): ?>
      <div id="contact-form-wrap" class="contact-form-wrap" style="display:none;"> <?php echo do_shortcode("$contact"); ?></div>
      <?php endif; ?>

JS:

jQuery(document).ready(function ($) {
  $("#btn").click(function () {
    $("#contact-form-wrap").show();
    return true;
  });
});

function resetScrollpoint(selector) {
  if(!selector) return;
  console.log("Header Height" + jQuery('#header').height());
  window.scroll(0,jQuery(selector).offset().top - jQuery('#header').height());
}

Here is a Loom video explaining the issue.