Anchor tags not working correctly within Hubspot


#1

page: http://www-continuum-net.sandbox.hs-sites.com/rmm-product-page?hs_preview=LbzoFHqJ-5642804860#products

The links in the sub navigation do not bring the page to the top of each section even though they are added in the highest container module/div.

Has anyone found a fix for this?

Please let me know.

Thanks,
Milana


#2

Hi @milanaabidor,

It appears to be working for me; clicking any of the links in the sub navigation (e.g. 'Products') scrolls me down to the section in question. Are you still running into this issue? Can you give me more details on how you're reproducing the issue?


#3

Hi Derek,

It links to the section but cuts of the header of the section even though the Id is added in the outermost container.


#4

Hi @milanaabidor,

I'm also seeing that when clicking the link for the first time, but it's behaving correctly after the page loads (i.e. waiting for the page to load, then clicking 'Products"). This appears to be because the code that 'moves' your sticky header to the top of the viewpoert executes after the browser shifts the viewport down to the anchor tag in question. This ends up covering the header.

This is a bit of a shot in the dark since I don't have any insight into exactly how you're doing it, but I think the best move would be to run that code immediately on page load whenever you detect an anchor tag, rather than only executing it when a visitor clicks on your sub menu. Since clicking the submenu functions correctly, it stands to reason that executing that on page load will also function correctly.


#5

Hi Derek,

There is no javascript involved here on my end. It's just an anchor tag I implemented in the sub-menu so it should work correctly as this functionality is pretty simple & commonly used without any javascript so I'm not sure why it isn't working correctly.


#6

Hi @milanaabidor,

That's interesting, it actually doesn't appear to be working on subsequent clicks anymore. Strange stuff. I think we got a bit derailed here because I was able to intermittently reproduce the issue in some weird way for some reason. Let's scrap all that and start from scratch; in all situations, your anchor links are functioning in such a way that the section header is hidden behind your sticky header.

The issue remains the same; browsers don't 'know' about your sticky header, so when a visitor clicks on your anchor links, the browser moves the viewport down to to the section header without considering the fact that you have a static element there. You'll need to adjust your section header elements to compensate for your sticky header; this stackoverflow thread has some useful info on the subject: