I’ve always disliked the way named anchors (<a href="#name">...</a>) behave in browsers. It jumps your viewport to a different part of the page, but it’s rarely obvious which section you have landed on. If the page is long enough, the referenced section will start at the top of your browser, but where does it end? If the content is towards the bottom of the page, it may not be at the top of the page, but somewhere in the middle. And what if your content is in two columns? Or a table? What you’ve linked to becomes totally ambiguous.
Sphinx uses named anchors quite a bit, so I wanted something that would improve their usability for Django Best Practices. That’s when I dug up this clever little jQuery snippet from our code vault.
This will briefly highlight and fade the <span class="caps">DOM</span> element referred to by the named anchor (technically, we’re using the id attribute, not the name attribute). You can see it in action by clicking here.
The link above should highlight this paragraph. In testing, Safari required the element to have a defined background color to start, but IE and FF were happy to fade back to whatever color that element inherited.
Peter is the founder of Lincoln Loop, having built it up from a small freelance operation in 2007 to what it is today. He is constantly learning and is well-versed in many technical disciplines including devops, …