▼
Streaming live at 10am (PST)

Anchor scroll not reaching its target - not an offset issue

Design help Animations & Interactions
#1

Problem:

I’m using a fixed anchor scroll menu on the side of my case studies pages. An example of the menu can be seen here: Sonder Mobile App Case Study. The menu is hidden until user scrolls down, so scroll down a bit to see it on the left side of the page.

The issue is when the page is first loaded and you click on say the last icon link for “Conclusion” the page doesn’t scroll to that section - it stops way before that section and you have to click it 2 or 3 times for the page to get there. Any idea why this is happening?

I’ve checked, and there’s no other anchor links with the same id="conclusion"

Here is my public share link: Steve’s Portfolio WIP

#2

I just checked your live site link and the anchor took me to the correct section on first click. Can you confirm the issue is happening when you check the link in an incognito window with all extensions disabled?

#3

Thanks @mikeyevin, I’ve recorded a screencast of the issue at the link below in an incognito window. I haven’t disabled extensions as it’s not probable that a user would have them disabled.

As you can see it takes 3 clicks to get to the conclusion section. What browser are you using?

**Update, so yes, I’ve disabled extensions in incognito and it does work on first click but not in a normal window with all extensions disabled. So what does that tell you?

Anchor Scroll Issue Screencast

#4

The reason I mentioned disabling them is mainly to rule out any extensions that may be affecting the behavior and less about other users situations (since it’s impossible to control what extensions someone may or may not have).

I noticed you updated your reply and sated that the issue is resolved disabling extensions but for some reason only while in incognito, but I don’t know why that would be the case unfortunately. I do notice that the site appears to be still loading content below the fold in your screen recording, so it’s possible that the page hasn’t fully loaded the necessary element that’s using the anchor ID.

For reference, I’m running the newest version of Chrome on a Windows machine and decently fast internet (400mbps+).

#5

Thanks, yes, I understand the reason for disabling extensions, it’s similar to turning off all plugins in wordpress to identify which one is causing the conflict, but since as you say it’s impossible to control what extensions someone may or may not have - I’ve never liked that troubleshooting recommendation for the very same reason.

I’ve added an embedded Figma prototype to this page, that’s the content that is being loaded after the first click, so that could be the cause, but there are only static images after the Figma embed - so why it stops again after the second click is a mystery.

Thanks for looking into it.

#6

Troubleshooting is mainly used to diagnose the cause of an issue, not necessarily solve it, so this is almost always my first question when someone has a localized issue. It’s also always the second step I take when testing myself after first checking projects in my “natural” environment. I understand it may seem futile when the extension is possibly used by one or more of your visitors, but if it’s an “essential” or common extension that’s the problem child then I’d go a step further and relay to the developer for a potential fix—or at the very least so they’re aware of the bug. In your case this doesn’t necessarily seem to be the case.

I took a moment to check another project and it looks like the National Weather Service Cast Study is showing a similar issue on my end where it takes multiple clicks to get to the correct section. Do you happen to have any projects without embedded Figma prototypes that you can test—or potentially remove it temporarily to see if that could be the issue?

#7

FYI, I just tried this again in incognito with extensions disabled and it still didn’t make it all the way to the anchor link. Not sure why it’s hit or miss.

Anchor Link Scrolling Issue - Incognito / Extensions Disabled

#8

I get it, my point is I don’t have time to fix the millions of chrome extensions out there by debugging my project that way. Further, maybe you fix one then another causes a conflict…it’s never-ending.

I can disable the Figma prototype, check it again and update, but as mentioned, it’s stopping again after getting to / past the prototype with only static images being loaded, so I don’t think that’s the issue otherwise the anchor links would work as expected on the other side of it.

#9

Understandable, just explaining my reasoning behind the question and thankfully (in this case) it was a valid exercise as it eliminated extensions as the cause of issue.

If it’s not the embedded Figma prototype, I’d imagine it’s due to the page size in general as both of these pages are fairly long with a decent amount of imagery used. There may be a bit of room for further optimization with something like TinyPNG, although each Figma prototype is over 1MB in size. Couple that with the amount of images and your National Weather Service Case Study for example is over 7MBs in total. I’m also seeing a handful of errors in the console that mainly appear to be from the Figma embeds, so it leads me to believe these may be part of the problem.

Given the nature of the page I don’t expect there to be too much you can do to shorten it, but I’m curious to see if removing the Figma elements improves the experience at all. It may be something that you can link to either in a separate window or modal to prevent them loading on the page, but admittedly I’m not sure if that’s more common when presenting these files as this is the first time I’ve seen them used.

Hopefully that helps you narrow down the issue :crossed_fingers:

#10

I was having a similar issue with a very long page. I don’t believe this is due to chrome’s extensions but due to chrome’s scrolling functionality. I’ve disabled the scrolling and it’s working fine now.

In the body attributes add the following:

attribute: data-scroll-time
value: 0

image

I hope this helps others!