Anchor link leads to wrong position

Support
#1

Hi there,

on my page: https://formwerk.com/startseite/ there is an anchor link placed in the button “Referenzen” (please find screenshot attached) which should lead to https://formwerk.com/referenzen/#architekturhochbau.

The id:architekturhochbau is assigned to the section that includes only the custom headline “Referenzen Architektur/Hochbau” but somehow the anchor link jumps to a position far above that section.
Why is that? All the other anchor links in this project work just fine.

Thank you!

Philipp

#2

Looking at your source code, your href for the button is a relative link to “/referenzen/#architekturhochbau” try making an absolute link to https://formwerk.com/referenzen/#architekturhochbau.

#3

Hi there,

I checked your website and seems that you decided to use an external link for the button you mentioned.

In general, if you want to have anchor link jump to the same page use simple #IDNAME, but if you want to link a specific section of an external page the solution given by @Roch101 is what you need to follow.

Thank you.

#4

Hi Roch101 & Christopher,

I followed your instructions and changed the relative link to an absolute link.
But it still leads to the wrong position.

Any other idea on that?

Thank you,

Philipp

#5

Hi again,

Please add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

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

  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = $('.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);
  }

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

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

#6

Hi Nabeel,

I added your custom Javascript ut still the anchor link is leading to the wrong position.

Regards

Philipp

#7

Hello There,

Thanks for updating in! X 5.1.1 is now available in automatic updates! This release contains fixes for several issues so be sure to check out the changelog (http://theme.co/changelog/). Please do update to the latest version. After doing the updates, always remember to clear all caches (if you are using WP Rocket, WP SuperCache or W3 Total Cache) when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Please let us know how it goes.

#8

Hi RueNel,

I updated everything but still no success.
You can see during the loading that it first jumps to the correct position but at the time the page is fully loaded the anchor point slides up.
Can you please help me out?

Thank you

Philipp

#9

Hi again,

I tried to access your Customizer but i’m getting an error:

Allowed memory size of 41943040 bytes exhausted

Please try adding the code below in your wp-config.php file located at the root directory of your site.

define( 'WP_MEMORY_LIMIT', '256M' );
define( 'WP_MAX_MEMORY_LIMIT', '512M' );

If you’re able to access the Customizer then try replacing the previous code with this:

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

  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = $('.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);
  }
  $(window).load(function() {
     if ( locHashIndex !== -1 && $(locHash).length ) {
        animateOffset(locHash, 1, 'linear');
     }
  });
});

Let us know how this goes!

#10

Hi again,

unfortunately I can not increase the memory limit but you can access the customizer like this:
X > Launch > Options

The updated JavaScript still doesn’t work for me.

#11

Hi again,

Thanks for the update. I changed the above code to this:

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

  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = $('.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);
  }
  $(window).load(function() {
     if ( locHashIndex !== -1 && $(locHash).length ) {
      setTimeout(function () { 
       	animateOffset(locHash, 1, 'linear');
      }, 300);
     }
  });
});

It seems to have fixed the issue, since you’ve cache plugin enabled. make sure to purge the cache after making any change to the site. Please clear your browser’s cache and check the page again.

Let us know how this goes!

#12

Thank you Nabeel! It works!

#13

Glad it worked.

Cheers!