Smooth scroll offset and Headlines

[michaelxxx]

Hi,

I use the plugin Easy TOC. When you click on a link in TOC, it jumps to the desired headline, but unfortunately the headline is always behind the fixed Navigation bar.

TOC has the possibilty to add a “Smooth scroll offset” and I have set it to 80px. But this doesn´t work anymore. I have checked my site with Health Check and Troubelshooting mode and it seem to be a conflict with X and/or Cornerstone.

You can test it here at my post.

The author of TOC wrote me: “It sounds like something else has hooked into the click event of an anchor that is overriding the behavior.”

The top menu is coming from X. So is there anything I can udjust via CSS or JS in X to fix that?

Michael

[ruenel]

Hello Michael,

Thanks for writing in! This issue could be related to the browser changes. Check out this thread:

• Smooth Scroll… not smooth at all - Support - Themeco Forum

You might be able to get around this by checking out the code in this old thread:

• Anchors scrolling too far - Support - Themeco Forum

Based on the code from other old thread, you can change the CSS selectors into ez-toc-link. And you may something like:

jQuery( function($){
  $(document).on('touchstart click', '.ez-toc-link',  function( e ) {
    var ID = $(this).attr('href');
    e.preventDefault();
    $('html, body').animate( { scrollTop : $(ID).offset().top - 90  }, 'linear' );

    //console.log($(ID).offset().top);
  });
});

Please be advised that the above code may not work out of the box. The code above only serves as an example to get you started with your custom coding. You will also have to maintain your code after every WP core, theme or plugin updates to make sure that your custom coding still works and does not create issues on your site.

Best Regards.

[michaelxxx]

Perfect, this does work.

Because the topic you mentioned is very old (from 2019) why isnn´t there any fix in X? And it´s not just a problem in Chrome. It´s also a bug in Firefox for example.

[christian]

Hey @michaelxxx,

I tested the beta version of X and jump links land below the sticky header. Try out the next version of X to see if it’ll fix the issue.

Just note that our themes do have their own jump link script so if the issue persists in the next version, you need to contact the Easy TOC author to learn how to disable its jump link script because we cannot create workarounds for plugin conflicts.

Thanks.