Anchor Link Not Working on iOS (iPad)

[plusstorm]

URL: https://linkgap.com.sg

I have tested the website on Desktop (Windows) and Android Smartphone, the anchor link on the top menu is working correctly.

But, on the iOS device such as iPad, when i click on the “About Us”, it does bring me to the section but when i scroll the page and tried to click on any other anchor such as “About Us” “Services” “Contact Us”, it will not work anymore unless i refresh it.

I am unsure how to fix this issue. Please advice.

[rad]

Hi @plusstorm,

Thanks for writing in.

Hmm, it could be related to touch events which have issues with iOS. Would you mind adding this code to your global custom javascript?

jQuery ( document ).ready ( function($) {

setTimeout ( function() {

$('#x-nav-wrap-mobile a').off('touchend touchstart');

}, 750 );

} );

Then please test it again.

Thanks!

[plusstorm]

Thank you for your reply.

I have added the script and cleared the cache but on ipad, it is still not working.

[plusstorm]

To add on, once the page has been scrolled, the header menu with anchor will not working anymore. Please advise.

[rad]

Hi there,

In that case, I’ll continue checking. Would you mind providing what iOS and Safari version you’re testing it with?

Thanks!

[plusstorm]

We have tested on a few different ipad devices. For my iPad version will be, 11.4 and safari version, 11.

[paul.r]

Hi,

I can see you have added Custom JS that affects the anchor links scroll.

Please replace your Custom JS Code with this.

jQuery(document).ready(function($) {
$('a[href*="#"]').off('click touchend touchstart');
  var $body                 = $('body');
  var $bodyHeight           = $body.outerHeight();
  var $adminbarHeight       = $('#wpadminbar').outerHeight();
  var $navbarFixedTopHeight = $('.x-navbar-fixed-top-active .x-navbar').outerHeight();
  var locHref               = location.href;
  var locHashIndex          = locHref.indexOf('#');
  var locHash               = locHref.substr(locHashIndex);

  function animateOffset( element, ms, easing ) {
    $('html, body').animate({
      scrollTop: $(element).offset().top - $adminbarHeight - $navbarFixedTopHeight + 1
    }, ms, easing);
  }

  
  $('a[href*="#"]:not([href^="#"])').on('click touchstart',function() {
    return true;
  });

  $('a[href^="#"]').on('click touchstart',function(e) {
      
    $href = $(this).attr('href');
    if ( $href !== '#' ) {
      var $id = $href.split('#').pop();
      var $el = $('#' + $id);
      if ( $el.length > 0 ) {
        e.preventDefault();
        animateOffset( $el, 850, 'easeInOutExpo' );
        $('.x-btn-navbar').click();
      }
     
    }
     
  });
});

Hope that helps.

[plusstorm]

Great! It is working now! Thank you so much!!!

[paul.r]

You’re welcome!