[Resolved] Offset anchors with fixed header

[Tom]

CTAs and buttons are better dealt with by plugins 🙂

[Markus]

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.

[Markus]

@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.

[Bin]

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?

[Bin]

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>

[Bin]

Maybe this could be working?

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

with this css:

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

[Tom]

You can give anything an ID, for example:

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

[Bin]

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?

[Bin]

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

[Tom]

Is your link jumping to the empty div at least?

[Bin]

Yep!

[Tom]

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.

[Bin]

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… ;))

[Bin]

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

[Tom]

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?

[Author]

Posts