Overengineered Anchor Links

Summary

Anchor links are deceptively simple at first glance: click a button, scroll to the heading, and done. But if you ever had to implement them, you might have encountered the . The issue being that, headings towards the bottom of the page can be too far down to scroll them to the desired position. The example component above shows how the ‘conclusion’ heading can never be reached. Surely this will be detrimental to the user experience. We need to come up with a solution. In this blog post, I’ll show some of the solutions I’ve come up with — from a hotfix all the way to unhinged. But before we do that, let’s create a more . Here, we see a viewport moving down the page, with the trigger line being set at 25vh from the top of the viewport. This is what we’ll use to visualize the different solutions. The most simple solution is to add We calculate the height of the padding by taking the delta between the last heading and the lowest point the anchor trigger can reach. Perfect, right? Well, sometimes the design team is not so fond of random extra padding, so lets keep searching. Practical: shift the trigger line Maybe instead of adding extra padding, This is also quite simple to do, we just need to calculate how far from the bottom the last heading is, and put the trigger line there as well. But, this would mean that when the users clicks an anchor tag, the heading could be put all the way at the bottom of the viewport. This is of course not great, since most people put the text they read on the top half of the screen. We need to keep looking. Good: translate the trigger points Instead of shifting the trigger line, we could the headings upwards. Instead of using the actual location of the headings as the ones causing the triggers, we create virtual headings and translate them upwards. A virtual heading is not actually visible in the article, its just the position we use to dictate the active state. One might argue that this is pretty much the same as shifting the trigger lin...