This article was written in 2014. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.

Linking to fragments on a page

When an element has an ID, you can link to it. All browsers I know will scroll to the position of that ID on the page. This is a very useful feature. It enables you to provide skip links to sections of a long article, for instance. The problem with this technique though, is that most of the time that thing you want to link to doesn’t have an ID. Today I found a script that tries to solve that problem. From now on you can link to any text you like on my blog.

Many people have thought about linking to unidentified fragments before, but I really like this version of the idea by Kevin Marks. With his proposal, you select some text, paste it behind the URL, behind two hashes, like this: https://vasilis.nl/nerd/linking-fragments-page/##like+this. I especially like it because Jonathan Neal wrote this polyfill that emulates fragment linking. The script adds an attribute fragmention to the parent element of the selected text. I simply added that script to the bottom of all my pages and wrote a few lines of CSS to style it:

[fragmention] {
    background: yellow
    animation: fragmention 3.5s both;
}
@keyframes fragmention {
    to {
        background: transparent; 
    }
}
/* http://lea.verou.me/2012/12/animations-with-one-keyframe/ */

I like it. From now on you can link to any text on my site.