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.

Comments

  1. Interesting. I’ve read and thought about Using CSS Selectors as Fragment Identifiers before and experimented with a little polyfill.

    However, linking to text-fragments is probably more user-friendly because it requires no technical knowledge (‘CSS Selectors?’). One down-side I can think of is that it can not easily be automated: one has to choose a phrase.