Highlighting Named Anchors with jQuery

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.

// highlight and fade background on named anchors
// requires jquery.color.js http://plugins.jquery.com/project/color
function highlight(elemId){
    var elem = $(elemId);
    elem.css("backgroundColor", "#ffffff"); // hack for Safari
    elem.animate({ backgroundColor: '#ffffaa' }, 1500);
    setTimeout(function(){$(elemId).animate({ backgroundColor: "#ffffff" }, 3000)},1000);
}
   
if (document.location.hash) {
    highlight(document.location.hash);
}
$('a[href*=#]').click(function(){
    var elemId = '#' + $(this).attr('href').split('#')[1];
    highlight(elemId);
});

This will briefly highlight and fade the DOM 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.

You can grab a copy of the snippet from GitHub. Did you find this helpful or have a better way of doing it? Let us know.

Comments

  • May 7, 2009 at 3:45 p.m. #
    Michael responded:

    Sliding the page, instead of letting the browser just jump there, would also help give a better sense of location. Ideally sliding to just above where the anchor is and then highlighting the proper area.

  • November 7, 2009 at 6:42 a.m. #
    lemetriss added:

    Is there any way to do the same if the destination is on another page?

  • July 5, 2010 at 2:14 a.m. #
    mbai chimed in with:

    Thank you, looks nice. The CSS3 pseudo class :target can help to achieve similar result.
    But then again, your solutions works cross-browser…

Got something to say?





About Lincoln Loop | Our Team | Portfolio

This was written on April, 17 2009 and is filed in code.

Our Products

Gondola
Gondola is a hosted CMS that gives designers a powerful and easy platform to create amazing geo-enabled Websites.
Trailmapping
Still in development, Trailmapping is a GPS enabled trail guide and trip logger.

Categories

Archives

Elsewhere

What we’ve been up to online

Interested in working with us?
Fill out the form below or contact us at:

PO Box 774441
Steamboat Springs, CO
80477

ph: 970.879.8810
fx:  970.367.8596
info@lincolnloop.com