Anchor Too Far Up

Hi! I’ve made my sticky bar invisible except on scroll up. The problem is I have an anchor on my homepage which is offset by the height of the sticky bar when you click on it.

This is my site: https://rossettibev.wpengine.com/

Currently, I have a bouncing arrow pointing down. When you click on it, it should take you to the section with the ID #navbartrigger. What it does is it takes you to that section, but it’s popped up about the height of where the sticky bar would be.

I tried removing this offset with some javascript, but it did not work.

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

How would I go about removing the offset for the anchor link on this arrow button?

Hi @santosfel5,
Thanks for reaching out.

I would suggest you set the id attribute to the row element instead of the section element. So it will scroll up to the row with the padding added to the section.
Please find the screenshot describing the settings:

Hope it helps.
Thanks

That worked! Thank you.

Hi @santosfel5,

You’re welcome and it’s our pleasure to help you. If you have any other concerns, feel free to reach us.

Thank you.

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