Thanks for writing in!

This is a known issue in Safari. The fix is to add a forward slash “/” before the anchor tag (e.g., #baptism). For example, change this link:

http://southcoastmobile.com/connect#baptism

To this:

http://southcoastmobile.com/connect/#baptism

Hope this helps. 🙂

Thank you.

Let us know if you need anything else.

Thanks. Have a wonderful day! 🙂

I’ve got the same issue, but unfortunately the extra forward slash still doesn’t make the anchor work in Safari.

My website is at digittl.com (hyperlinks to anchors are present for ‘Classroom CPD’ and ‘Student Workshops’).

After reading advice on forums, I’ve also tried deleting the ‘www.’ in the site URL in wordpress settings to no avail.

Many thanks,

Rich

Thanks for writing in!

Upon checking your website, I’m unable to see any anchor link in your menubar, would you mind pointing us where you have inserted an anchor link so we can take a closer look?

In the meantime, did you try the method we’ve provided in our earlier response: https://theme.co/x/member/forums/topic/submenu-anchor-links-resolving-at-top-of-page-in-safari/#post-249594?

Thanks!

The anchor links are further down the homepage – the image buttons appear for Staff Training, Classroom CPD, Student Workshops and School Development. These each link to an anchor for the relevant section on the ‘Services’ page.

Cheers

Please add this in Customize -> Custom -> JavaScript :

jQuery(document).ready(function($) {
  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*="#"]').off('click');
  $('a[href*="#"]:not([href^="#"])').click(function() {
    return true;
  });

  $('a[href^="#"]').click(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' );
      }
    }
  });
});

Hope that helps.

Thanks for the javascript coding- I pasted it into customizer but the links are still just resolving to the top of the ‘Services’ page using safari. I did already have some custom text in the java script (to make buttons more responsive) – will that any effect the script you gave me? This is the current text in my custom javascript:

jQuery(document).ready(function($) {
$(‘html, body’).on(‘touchstart click’, function(e) {
var popover = $(‘.popover’);
if ( popover.length ) {
var popoverId = popover.attr(‘id’);
$(‘a[aria-describedby=”‘ + popoverId + ‘”]’).removeAttr(‘aria-describedby’);
popover.hide().remove();
}
});
});
jQuery(document).ready(function($) {
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*=”#”]’).off(‘click’);
$(‘a[href*=”#”]:not([href^=”#”])’).click(function() {
return true;
});

$(‘a[href^=”#”]’).click(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’ );
}
}
});
});

Can you please check your anchor html tag? http://prntscr.com/75rh5b

There is an unclosed p tag in your page. Some of the browsers doesn’t render correctly if there are invalid html tags inside the page.

Thank you.