Offset anchors with fixed header

CTAs and buttons are better dealt with by plugins :)

Just adding this to get involved in new replies.
I am also using the "Hash Link Scroll Offset Plugin".
Would be nice, if this is part of the GP theme some day.

@bin topic: "Hash Link Scroll Offset Plugin"

If you click an anchor link (absolute link!) from the actual/same page (e.g. a top menu button) it does not work properly.

It works fine for me. If you declare the anchor links like
<a href="#[my-hash]">
instaed of
<a href="https://[mydomain.mytld/mypage#my-hash]">
it works fine from external, internal und the same page.

Hello, Tom.

I'm still struggling with the "anchor offset" in sections. Using this

<p style="position: relative;"></p>

is causing W3C-Warnings, because the NAME-tag is obsolete. Therefore I would rather prefer this:

but the WP-Editor doesn't accept empty links!!!

Do you have any decent solution??? Regards, Bin

PS: Are you already working on an option for custom Section Names?

Upps, sorry for the lost code snippets above:

1. <p style="position: relative;"><a id="test2" style="position: absolute; top: -80px;" name="test2"></a></p>

2. <a class="anchor" id="test2"></a>

Maybe this could be working?

<h2 class="anchor" id="test2"></h2>

with this css:

a.anchor {
  display: block; 
  position: relative; 
  top: -90px; 
  visibility: hidden; }

You can give anything an ID, for example:

<div class="anchor" id="test"><!-- anchor --></div>

Sorry, Tom. It doesn't work!

I used

<div class="anchor" id="test"><!-- anchor --></div>

together with

a.anchor {
  display: block; 
  position: relative; 
  top: -80px; 
  visibility: hidden; }

Result: NO scroll-offset-effect!!!

Where is my mistake?

By the way: I use your plugin "Simple CSS" for code insertions! Bin

Is your link jumping to the empty div at least?

Yep!

I personally use this code:

<script>
jQuery(function($) {
	$('a.smooth[href*="#"]:not([href="#"])').click(function() {
		if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
			var target = $(this.hash);
			target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
			if (target.length) {
				$('html,body').animate({
					scrollTop: target.offset().top - 60
				}, 500);
				return false;
			}
		}
	});
});
</script>

Then give your links a class of smooth.

The 60 in the code is the amount of pixels to offset.

OK, I'll give it a chance. But please tell me: Where is the perfect place for this code? I guess, I have to create a new plugin... ;))

Well, I tried the code in the header (wp_head) and footer (wp_footer) using your Hook-Plugin > NO effect!

In wp_footer should work.

I'm using it here on this site with great success.

Have you added the smooth class to the links that link to specific sections?