Anchor link from header link to a Slider Revolution slider

Hey Tri,
Thanks for your question but the expected login is not working, is the link below correct?

Best regards,
Mike

Hi,
When I login to wordpress.com with your details I don’t see a site with Enfold installed, I don’t think this is the correct site.
Please check.

Best regards,
Mike

Hi,
Thanks, I don’t think that the login is an admin login because it won’t let me edit the home page and I can’t see any of the theme settings or edit the slider revolution. Please check.
Is your homepage only created with slider revolution slides?

Best regards,
Mike

Hi,
OK, we will wait to hear back from you.

Best regards,
Mike

Hi,
Thanks for the link, this seems to be working for me in Windows in Chrome & Edge, but Firefox is off like you say.
This looks similar to an issue when a page section changes size alot on page load, sometimes the browser will go to the section before the content is loaded in one or more sections and then when the content loads the position moves do the heights.
Try adding some css for the page elements to set a min height so each section will maintain their heights.
Unfortunately the slider elements you are using can’t have custom IDs added to them, which whould help with this and the links instead of ueing ID’s in the slider like #slider-130-slide-116-layer-30
Try using color sections with a code block element for the slider shortcode, you can set a min height to the color section and add a custom ID for the link like #services
Or perhaps try using the perloader, this may allow the page to load before the browser selects the section ID so all of the heights are correct.

Best regards,
Mike

Hi,
Ok, we will wait to hear back from you to see if this helped.

Best regards,
Mike

Hi,
Currently your color sections are not set to a height, try setting them all to 100% height:

and as I understand each slide is meant to be a full screen height, and you have five sections, but two of them are code blocks with the shortcode and three of them are the slider elements:

the slider elements can not have a height set, so try changing them all to color sections with code blocks with the shortcode that are set to 100% height and see if this helps.
When I test from the homepage the services section lands in the right place, but from the blog page it doesn’t, this seems to point to the position moving as the height changiing when the content loads. Setting the height of each section should correct.

Best regards,
Mike

Hi,
It seems to always work from the home page and about 50% of the time from the blog & contact page for me, so it seems to be an improvement.
I have asked the rest of the team if they have any ideas, and will reply when I hear from them, Thank you for your patience.

Best regards,
Mike

Hi,
Thanks for your patience, I tested this javascript in your child theme functions.php to slow down the jump to any hash ID, such as your ‘service’ anchor to give the page time to load all of the elements, and then slowly scroll to the ID instead of jumping to it.

function custom_slow_scroll_to_anchor_script() { ?>
  <script>
function slowScrollToAnchor() {
  var urlHash = window.location.hash;
  if (urlHash) {
    var target = document.querySelector(urlHash);
    if (target) {
      var targetPosition = target.offsetTop;
      var startPosition = window.pageYOffset;
      var distance = targetPosition - startPosition;
      var duration = 2000;
      var startTime = null;

      function scrollAnimation(currentTime) {
        if (startTime === null) startTime = currentTime;

        var timeElapsed = currentTime - startTime;
        var scrollY = easeInOutQuad(timeElapsed, startPosition, distance, duration);
        window.scrollTo(0, scrollY);

        if (timeElapsed < duration) {
          requestAnimationFrame(scrollAnimation);
        }
      }
      function easeInOutQuad(t, b, c, d) {
        t /= d / 2;
        if (t < 1) return c / 2 * t * t + b;
        t--;
        return -c / 2 * (t * (t - 2) - 1) + b;
      }

      requestAnimationFrame(scrollAnimation);
    }
  }
}
window.addEventListener('load', slowScrollToAnchor);
</script>
  <?php
}
add_action('wp_footer', 'custom_slow_scroll_to_anchor_script', 99);

This worked in my tests, please clear your browser cache and check.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike