Anchor Scolling Overlaps Menu Bar

Support
#1

I found this thread: https://theme.co/apex/forum/t/anchors-scrolling-too-far/9599

Which worked for me initially, now I can’t seem to make it work.

Try the buttons on this page: https://woottonwebsites.com

They scroll too far past the anchor point. I’ve saved the JS script in the above thread both on the page and in the global JS but I can’t get it to take effect.

#2

Hi There,

Thanks for writing in! Can you try changing the value of 132 in your code and try adjusting it.

Hope that helps.

#3

Hello - I’ve been doing that without effect. I’ve turned off caching, and tried varying the 132 to 1000 and 1, but it doesn’t seem to be happening. Can you tell if the script is triggering?

Bill.

#4

Hey Bill,

The code you’re using won’t work in your case, please replace it with this:

jQuery( function($){
  $(document).on('click', '.x-anchor-button[href^="#"]',  function( e ) {
    var ID = $(this).attr('href');
    e.stopPropagation();
    $('html, body').stop().animate( { scrollTop : $(ID).offset().top - 176  }, 'linear' );
  });
});

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

#5

Thanks @nabeel - perfect. I will let people know via the Facebook group too.

#6

Glad it worked.

Cheers!

#7

Hello @nabeel I am now using a flip card and changed the code to reference the button on the back like this but I don’t think it works:

jQuery( function($){
  $(document).on('click', '.x-face-button[href^="#"]',  function( e ) {
var ID = $(this).attr('href');
e.stopPropagation();
$('html, body').stop().animate( { scrollTop : $(ID).offset().top - 200  }, 'linear' );
  });
});
#8

Hi again,

As you see this requires custom development and the code I provided above serves as a guide, if you need in depth changes you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. We do have an in-house custom development team that offer paid services, who may be able to assist. They can be contacted at pinnacle@theme.co if this is of interest to you. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

#9

@nabeel I’m not feeling the understanding - the fact that the page scrolls too far is a bug in Pro - if you fix the bug I wouldn’t need help. Is it so complex that you can’t adapt that script?

The scrolling should take account of the height of the header, it has been noted on the other threads that this is something X/Pro should handle.

Please help, Bill.

#10

Hi Bill,

Sorry to hear that, as stated, one page scrolling is not available in PRO Headers due to its complex nature of the Header Builder.

There are too many variables to consider and each site has a unique Header structure.

For example the code above, it will only work for your site and needs some adjustment to make it work on others.

I checked your site and looks like it is down at the moment?

Make sure you have added the ID as link for your button.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.