On page navigation (anchor / ID)

  • cfuturi

    (@cfuturi)


    7 years ago

    To start it off, I’m not a developer, consider me someone who is not trained but who does enjoy a puzzle.

    I’ve hit a bit of a confusing point, while attempting to insert on page navigation. Nothing fancy, just linking to anchors. Trouble is, placing the anchors. Particularly when it comes to controlling where the jump snaps to.

    Ideally I’d be able to assign ID’s to sections. But in Astra, using Gutenberg, those appear to be assigned already. Interestingly, they can change depending on edits on page.

    That leaves me with a conundrum. Am I missing something? Suggestions would be quite welcome.

Viewing 1 replies (of 1 total)
  • Team Brainstorm Force

    (@brainstormteam)

    7 years ago

    Hey,

    This is how it works for Ultimate Addons for Gutenberg – Section block. You might want to consider adding an extra class to the section and scroll using jQuery.

    You can add a class from here – http://bsf.io/j3uy-

    And add the below code to your functions.php file from the theme.

    The below code will work when you hit the URL with the hash value as the class name – Ex: https://your_url.com#my-section

    add_action( 'wp_footer', function() {
	?>
	<script type="text/javascript">
		jQuery( document ).ready( function() {
			var hash = window.location.hash;
			if ( '' != hash ) {
				hash = hash.replace( '#', '' );
				var $container = jQuery("html,body");
				var $scrollTo = jQuery('.' + hash);

				$container.animate({scrollTop: $scrollTo.offset().top - $container.offset().top + $container.scrollTop(), scrollLeft: 0},300);
			}
		} );
	</script>
	<?php
} );

    I hope this clarifies your doubts.

    Regards,
    Vrunda Kansara

Viewing 1 replies (of 1 total)

The topic ‘On page navigation (anchor / ID)’ is closed to new replies.