Hello,
None of my in-page links are going to the right sections. I’m using a CMS site. Any help would be greatly appreciated.
Hey Christine, I’m not sure where your anchor links are, and I’d need a link to a published version of your site to check the HTML.
Most often, the problem is lazy loaded images.
In HTML, the anchor position is calculated by the browser at the moment you click the link. But scrolling down the page can also trigger the loading of lazy-loaded images which then changes that anchor position.
Hey Michael,
Thanks for the reply. I’m not sure how to change the images to eager load, or if it that would make my site slow. It’s the “View designs” button on the case studies pages that I’m trying to configure.
The published site is: www.christinecodyparker.com
Thanks
It’s under settings for you image elements. You can just select the image and the click the gear icon at the top right to view those settings.
Well, if you’re trying to navigate them to Final Designs at the bottom of the page, those images will have to load at some point anyway.
It’s a trade-off you have to choose, but if you’re wanting to use anchor navigation, you have to make the page layout predictable.
A better, but more intense way, is to specify the image dimensions of every single image on the page, so that the browser knows the layout sizing before the images are loaded. However, you have a lot of images and in some cases ( images inside of rich text elements for example ) you may have complications controlling those sizes directly in a responsive way.
So you’re saying it measures the distance to the target section, which changes once images start to load? Meaning I should change them all to Eager? Do you know how to do that within a rich text block drawing content from a CMS project? Thank you so much.
Exactly, that’s how your browser navigates with anchor links.
There are other things that can mess with your page height as well, such as certain interaction approaches, but in your case it’s the lazy loading images.
You can see this yourself-
- Load the page
- Scroll all the way to the bottom, wait for your images to load
- Scroll back to the top
- Now hit your link.
With the images all loaded, your browser finds your section position fine.
That’s the easiest way, however you have a lot of images. There’s still a chance the user could click that nav link before they’re all loaded, even though they all started as soon as the page was accessed.
You’ll just need to test that. I suspect in RTE’s images are already set to eager load.
1 Like