• Due to lazy loading of images, the anchor link could jump to a wrong positiion. The jQuery animation is used to solve this problem. Ref: stackoverflow.com

/**
 * Anchor link to Enquire Form
 * Animation to solve wrong position jump. 
 */

jQuery("body").on("click", ".cu-menu-enquire a.menu-link", function (e) {
  let targetSelector = this.hash;

  let $target = jQuery(targetSelector);

  jQuery("html, body").animate(
    {
      scrollTop: $target.offset().top, 
    },
    {
      duration: 1800,
      step: function (now, fx) {
        let newOffset = $target.offset().top;
        if (fx.end !== newOffset) fx.end = newOffset;
      },
    }
  );
});

• To enqueue the file cu-script.js which contains the above code, add the following lines to functions.php. Note that jquery is the dependency.

 function cu_enqueue_script() {
	wp_enqueue_script( 'cu-script', get_stylesheet_directory_uri() . '/cu-script.js', array('jquery'), CHILD_THEME_ASTRA_CHILD_VERSION, true );
}

add_action( 'wp_enqueue_scripts', 'cu_enqueue_script', 15 );

For anchor jump to a position on the same page, the URL will have a # tag at the end, to remove this hash tag, add the below script to the jQuery for jump error above.

/** remove hash tag after scrolling to position
    the hash tag will be removed 1.9s after the jump,
    this script should be included into the above jQuery for jump error
 */
setTimeout(() => {
	const currentURL = window.location.href;
	const urlWithoutHash = currentURL.split('#')[0];
	window.history.replaceState({}, document.title, urlWithoutHash);
}, 1900);

• As the Enquire Now makes the page to scroll down on the same page, the mobile nav panel could not close itself. A JS script is required to solve the problem.

/**
 * Hide mobile menu panel after Enquire Now menu item is clicked
 */
const popup = document.querySelector("#ast-mobile-popup");
const mobileEnqLink = document.querySelector(
  "#ast-mobile-popup .cu-menu-enquire"
);
const burgerIcon = document.querySelector("button.menu-toggle");

mobileEnqLink.addEventListener("click", (event) => {
  event.preventDefault();
  popup.classList.remove("active");
  popup.classList.remove("show");
  burgerIcon.style.display = "flex";
});

Increase WordPress Image Scaling Threshold

<?php
// Increase the image resize threshold to 4000px on the longest edge
function smartwp_big_image_size_threshold( $threshold ) {
 return 4000;
}
add_filter( 'big_image_size_threshold', 'smartwp_big_image_size_threshold', 999, 1);

Disable WordPress Image Scaling

// Disable WordPress' automatic image scaling feature
add_filter( 'big_image_size_threshold', '__return_false' );