Same-page Anchor to Sections

[freedomdesign]

Hi there,

I am trying to set anchors to sections that will make a smooth scroll from a button click.

I have set the section ID and then linked to it on-page as usual, however it is jumping 60+ pixels below the top of the section.

Is there something different with the new Pro that I am missing? Please help me correct this.

You can check this by clicking the “Learn More” button in the top section.

http://peoplecentral.flickdigital.co/

Thanks in advance - Jade

[ruenel]

Hello There,

Thank you for the very detailed post information. Regretfully this is a known issue of Pro theme. It does not recognize the height of the custom header which is why it is jumping around the same height as your header. To temporarily resolve this, in Cornerstone custom js section, Custom JS, insert the following custom js code

jQuery ( document ).ready( function($) {

	setTimeout ( function() {

		$('.x-anchor.x-anchor-button[href*="#"]').off();

		$(document).on('click', '.x-anchor.x-anchor-button[href*="#"]', function(e) {

			e.preventDefault();

			console.log( $(this).attr('href') );

			var hash = '#' + $(this).attr('href').split('#')[1];

			if ( hash == '#' ) return false;

			$('html, body').stop().animate({ scrollTop : $(hash).offset().top - $('.x-masthead').outerHeight() });

		} );

	}, 500 );

});

Hope this helps. Please let us know how it goes.