Overengineered Anchor Links

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. Hotfix: extra padding 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. P ... Read full article.