[Feature request] Anchor offset

Would you consider adding the option for a top offset to the anchor stack? If you are using a sticky navigator the anchor focus is hidden under the navigator. Additionally having smooth scroll would be really welcome also.

FWIW (for anyone else), I can achieve both of these effects with the following js added to the page (adjusting top target offset), but it would be wonderful if it was just part of the stack.

$(document).ready(function(){
$(‘a[href^="#"]’).on(‘click’,function (e) {
e.preventDefault();

  var target = this.hash;
  var $target = $(target);

  $('html, body').stop().animate({
      'scrollTop': $target.offset().top -125
  }, 900, 'swing', function () {
      window.location.hash = target;
  });

});
});

1 Like

@Bioguy – the problem here is that the Anchor stack serves dual-duty as a normal anchor stack as well as a tool for the Mega Menu stack, so adding in the javascript to handle the offset causes some problems, which I won’t delve too deep into.

What you’re looking to do is built-in to the Scroll To stack though.

Ah, ok.
Yeah, the Scroll-To stack does have the offset I need, but unless I’m missing something (always possible) it only works as a button or icon.

Yes. It isn’t going to work off of a normal link. That said can set the Button Style to a Link like style in the Scroll To settings.

I’d like to second the request here. I’m using the anchor on my home page and reference it from a second page. Unfortunately, the anchored heading and initial paragraph does end up hidden behind the sticky navbar. Not a good look. It would be nice if either:

  • The anchor automatically compensated for sticky navbar’s
  • The anchor had an offset property.

www.pig-in-a-box.com.au (my first foundry site)
Link to home page found in “Prices” page.

Cheers, Bernie…

Hey there @bdekok

It isn’t that I wouldn’t like to provide an offset for the anchors coming from other pages – it would be nice – but that isn’t how HTML anchor links work unfortunately.There’s a chance it could be done by incorporating some javascript that would constantly monitor the page for anchors in the URL and then act on that, but the problem is other stacks, like Glide or Mega Menu for instance, use anchors to navigate the page and this would confuse them leading to problems.

FWIW, I ended up using SmoothScroll from Marathia. It has offset settings and a nice animation. I haven’t encountered any incompatibilities (yet).

@Bioguy: At first glance it does not appear that the stack that you mention provides offsets for links to other pages using anchors, which is what I was discussing above and what @bdekok was talking about . If it does and I missed that feature I apologize. The Scroll To stack in Foundry does indeed offer offsets within its settings though if you’re just looking to scroll within a page.

Jeroen (the Marathia guy, I’m assuming) added that function in when I inquired about it. He’s probably just never updated the description page.

The Foundry Scroll-To stack works beautifully, but as I mentioned above, it only works as a button. That just wasn’t an option for what I was using anchors for.

Cool. I suspect if you use it on a (destination) page with Glidr you’ll have problems.

I just solved this myself, thought I’d carry it back just in case it hasn’t been covered.

I found the easiest solution was a CSS style applied to the anchor stack’s hash worked perfectly. #Anchor {top: 1em} kinda stuff.

.anchoroffset{
	top: -6em;
	}
2 Likes