How do you add offset to scroll from a click from the Rankmath TOC?

Hello,

We apologize for the issue you are facing with the header covering the H2 title when clicking on an anchor link from the Rank Math Table of Contents (TOC). To add an offset for scrolling, you can use a bit of jQuery to adjust the scroll position when an anchor link is clicked. Here’s how you can do it:

1. Add jQuery Code: You can add the following jQuery code to your theme’s functions.php file or in a custom JavaScript file:

   jQuery(document).ready(function($) {
      $('a[href^="#"]').on('click', function(event) {
          event.preventDefault(); // Prevent default anchor click behavior
          var target = this.hash;
          var $target = $(target);
          $('html, body').animate({
              scrollTop: $target.offset().top - 100 // Adjust the offset value as needed
          }, 800, 'swing');
      });
   });

   In this code, -100 is the offset value. You can adjust this number based on the height of your header to ensure that the H2 title is visible after scrolling.

2. Save Changes: Make sure to save the changes to your functions.php file or your custom JavaScript file.

This should help in ensuring that when you click on an anchor link in the TOC, the H2 title is not covered by the header.

If you have any further questions or need additional assistance, feel free to reply to this ticket!

Hello,

Thank you for contacting us. We apologize for any inconvenience this issue may have caused.

Here’s a basic solution using JavaScript to add the offset:

document.addEventListener("DOMContentLoaded", function() {
  var offset = 100; // Adjust this value as needed
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
      e.preventDefault();
      const target = document.querySelector(this.getAttribute('href'));
      window.scrollTo({
        top: target.offsetTop - offset,
        behavior: 'smooth'
      });
    });
  });
});

This script ensures that when clicking on an anchor from the TOC, it scrolls to the section while accounting for the header height. You can adjust the offset value based on the size of your header.

You can use the WP Codelite plugin and apply it to the site wide footer.

Let us know how it goes. Looking forward to helping you.

Thank you.

Hello,

The snippet we shared is JavaScript code and not PHP.

As we recommended earlier you can use the WPCode plugin to implement it on the frontend.

Thanks.

Hello,

Placing it in the footer.php should work as long as it is enclosed properly within script tags

However, as mentioned earlier, using a plugin like WPCode would still be preferable for better management and avoiding theme update issues.

Thanks.

Hello,

We might need to take a closer look at the settings. Please edit the first post on this ticket and include your WordPress & FTP logins in the designated Sensitive Data section.

Please do take a complete backup of your website before sharing the information with us.

It is completely secure and only our support staff has access to that section. If you want, you can use the below plugin to generate a temporary login URL to your website and share that with us instead:

https://wordpress.org/plugins/temporary-login-without-password/

You can use the above plugin in conjunction with the WP Security Audit Log to monitor what changes our staff might make on your website (if any):

https://wordpress.org/plugins/wp-security-audit-log/

We really look forward to helping you.