Problem with anchors

[Zorgfix]

Hey there,

We are currently building a website with the pro-theme. We noticed that linking to an anchor on a different page (different then the page we are linking from) will make the page load ‘lower’ then where the anchor actual is on that site.

Basically we just gave a section an ‘id’ to link to and it jumps lower then the actual anchor (maybe because we have a sticky bar in our header?).

Anchor-links to anchors on the page itself work fine. I’ve seen one other thread about this but there is no solution given.

Hope you can help.

[nabeel]

Hi @Zorgfix,

Thank you for reaching out to us. I tried checking your site but it’s under construction at the moment. I tested it on my local setup and it seems to be working fine, this could be your setup related issue, you can try fixing it by adding the following code in the Theme Options > JS:

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

  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = $('.x-masthead').outerHeight();
  var locHref              = location.href;
  var locHashIndex         = locHref.indexOf('#');
  var locHash              = locHref.substr(locHashIndex);
  var dragging             = false;
  
  $body.on('touchmove', function() {
      dragging = true;
  } );
  
  $body.on('touchstart', function() {
      dragging = false;
  } );


  //
  // Calculate the offset height for various elements and remove it from
  // the element's top offset so that fixed elements don't cover it up.
  //

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


  //
  // Page load offset (if necessary).
  //

  $(window).load(function() {
    if ( locHashIndex !== -1 && $(locHash).length ) {
      animateOffset(locHash, 1, 'linear');
    }
  });


  //
  // Scroll trigger.
  //

  $('a[href*="#"]').off('touchend click').on('touchend click', function(e) {
      console.log($('.hm1.x-bar-fixed').outerHeight());
    href        = $(this).attr('href');
    notComments = href.indexOf('#comments') === -1;
    if ( href !== '#' && notComments ) {
      var theId = href.split('#').pop();
      var $el   = $('#' + theId);
      if ( $el.length > 0 ) {
        e.preventDefault();
        
        if (dragging) {
            return;
        }
		
		if( $('.x-anchor-toggle').hasClass('x-active') ) {
			$('.x-anchor-toggle').click();
		}
        
        animateOffset($el, 850, 'xEaseInOutExpo');
      }
    }
  });
});

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[Zorgfix]

It doesn’t seem to be working or I’m not using it in the correct way. I’ve edited the site for a clear idea of the problem. When clicking one of the blocks on the main page (below the USPS) the site will redirect to a subpage. You’ll see that the actual viewport is is below the anchor.

However, on that same site I created a link (in the top section) named ‘test’ when clicking this the page jumps to anchor just fine.

[rad]

Hi @Zorgfix,

Yes, it’s due to the sticky header. The anchor linking from page to page is also done by the browser that’s why it’s different. While the anchor linking with scroll effect is only applicable on same page, which yes, will work on top page where you set the test.

Would you mind providing the exact URL where it is? I can’t find the USPS from the sites in your account.

Thanks!

[Zorgfix]

You can click any of the images in the small grid with 4 images.

[friech]

Hi @Zorgfix,

I have checked the links and its jumping to the correct sections, there is no scrolling effect though because that is only for One-page navigation.

Please clear your browser’s cache.

Thanks,

[Zorgfix]

It seems to be working (with a little delay). May I ask what you have changed?

[friech]

Hi @Zorgfix,

Nothing really, I just check your page to see the issue and it already behaves like that. Please clear all your caching features (plugin, server-side, CDN, and browser’s cache.

Thanks,