Docs

[Javabass]

Hi, on the following site: southcoastmobile.com, I have submenu items under the ‘Ministries’ and ‘Connect’ page. These are all links to anchors on the respective top level page, with the exception of the ‘Small Groups’ item. While on the respective top level page, the anchor links work just fine, however, when you click on one of the anchor links while on another page, they resolve at the top of the respective top level page. This only seems to happen in Safari. All links resolve at the proper anchor location in Chrome and Firefox. WordPress, X Theme, and all plugins are up to date. Any thoughts?

[Zeshan]

Hi there,

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.

[Javabass]

Perfect! Thanks for the quick support!

[Nico]

Glad to hear that!

Let us know if you need anything else.

Thanks. Have a wonderful day! 🙂

[richdigittl]

Hi,

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

[Zeshan]

Hi 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!

[richdigittl]

Thanks for the reply – yes I did read through your earlier suggestions but they haven’t seemed to have worked.

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

[Christopher]

Hi there,

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.

[richdigittl]

Hi again,

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’ );
}
}
});
});

[Rue Nel]

Hello There,

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.

[richdigittl]

Thanks for the reply.

I checked the anchor tag, but I’m unsure as to what might be wrong with it – is it just the incorrect p tag or something else too?

I’ve corrected the p tag (think there were two I’d missed) and searched for other errors but can’t see any. The anchors are still not working on Safari! Thanks for helping – any more ideas?!

[Rad]

Hi there,

Would you mind providing some video/screen recording? It works on my safari.

Thanks.

[richdigittl]

Thanks for the reply, glad it works on Safari for you- I’ve tried it on my iPad and phone without success. Here’s the URL of a screen video recording from my iPad:

[richdigittl]

Thanks for the reply, glad it works on Safari for you- I’ve tried it on my iPad and phone without success. Here’s the URL of a screen video recording from my iPad:

[video src="http://digittl.com/wp-content/uploads/2015/05/IMG_0624.mp4" /]

[Rad]

Hi Rich,

What’s the exact url of the page you’re testing? I can’t find it from southcoastmobile.com

Thanks.

[Author]

Posts