3

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.

Pramod Gangadar
  • 302
  • 2
  • 8
  • @CodeForGood I can't answer because someone mark as duplicate and closed ... But this may work for you: `function resetScrollpoint(selector){if(!selector) return;console.log("Offset top before = " +jQuery(selector).offset().top);jQuery(selector).show(0,function(){console.log("Offset top after = " +jQuery(selector).offset().top);window.scroll(0,jQuery(selector).offset().top - jQuery('#header').height());});}` That happend because your form is not yet visible and `offset().top` return `0` ... but if you use `show()` before ... this may work – MTK Aug 20 '22 at 18:53
  • After you copy the modified function use https://beautifier.io/ for rearrange the code because is in one line – MTK Aug 20 '22 at 18:55
  • Thanks for your wonderful helping nature! Will try your solution in the comment. – Pramod Gangadar Aug 22 '22 at 13:34

0 Answers0