Drop your extra anchors everyone

Blogged into & on 10/08/2005 | comment

So now that we’ve all agreed scrolling is ok, and that it’s ok to have content below the fold, I think it’s safe to introduce a technique I’ve rarely heard talked about: using existing page elements as link anchors for navigation around long pages.

If you’re looking for ways to keep your HTML mark-up lean and semantic this is one more technique to take note of. I’m sure most of you know about this already, so it’s not news. But for those that don’t, or those that have simply forgotten, here’s a great technique we can use for intra-page navigation.

Say you’ve got a really long page with lots of awesome text and/or photos, and you want to put a link “back to the top” at the bottom of your page to save users from having to scroll. Instead of adding:

<a name="anchor">This is a named anchor</a>

to the top of your page, and:

<a href="#anchor">back to top</a>

at the bottom of your page. All you need to add at the bottom of your page is:

<a href="masthead">back to top</a>

if you’ve already got a div with the ID masthead at the top of your page, as long as it lies above everything else in your markup.

Alternatively, instead of using <div id="masthead">, another anchor you’ve always got at the top of your page is the <body> tag. Just give it an id and away you go.

If you’ve got some great content hiding at the bottom of a really long page, which you want to make easily accessible from the top, this technique can be used there too. Again, link to that content by using it’s ID like this:

<a href="#footer">Check out the footer</a>

which will send users to the foot of the document.

Anchor properly

For those of you with a keen eye for proper semantics, you’re probably thinking great technique, too bad it’s not valid. And you’re right. Although this technique works, the proper (er, valid) way of doing this would be to add name="masthead" to the div you want to use as your anchor. Doing so will also remind you that you’ve linked to that div from somewhere on the page, so that before you go ahead and change that div’s ID for whatever reason, you will also remember to adjust any links pointing to it.

So thanks for reading this far down the page. Now, go ahead and jump back to the top before you move on.

Don't believe me? Here's what others are saying...

  • Interesting. I will have to give it a try in my redesign.

    — Joshua Kendall    10/08/2005    #

  • Interesting, thanks for the tip. I’ll have to give it a try something.

    ~Rea

    — Rea    10/08/2005    #

  • Why? Why did you do that? Why did you describe a method, demonstrate the method, and then tell us that the method was invalid, and then only allude to wtf the correct method is?

    Why did I have to spend 5 minutes trying to figure out wtf the difference was?

    — w    10/08/2005    #

  • @w – you’ve missed the point of my article.

    The method is not incorrect. It works perfectly, and to make it 100% valid you can add the name tag to your anchor DIV, rather than adding an extra "holding" < a > element.

    — Terry Evans    10/08/2005    #

  • Why not just use id instad of name, though? #page will match id=’page’ as well.

    — Veracon    10/08/2005    #

  • Firstly, it is not immediatley clear what an “anchor div” is.

    More importantly, why an anchor div? Why not use a link to link to a div or some semantically meaningful element?

    sigh … time passes … I really must be dim today, I’ve tried every permutation of textile syntax, and can’t seem to get code into here.

    Are you doing a strip_tags before applying textile?

    — w    10/08/2005    #

  • W, sorry for the confusion. What I’m saying is to use a link, in the form of an A element, to link to any div on your page. Usually people link from one link to another link, not a div, adding an extra piece of markup.

    @Veracon – yes, you can do that, but I believe the W3C spec is that you are supposed to “name” the element. I would be happy to be wrong there, and just do what you are saying, and what I said at the beginning of the article.

    Man, I knew some of the terminology here would be cause for confusion!

    Regarding textile, I think it’s improperly stripping tags after previwing comments – I’ll look into that.

    — Terry Evans    10/08/2005    #

  • Call me crazy but I thought everyone knew about this.

    Anyway, well written, keep up the good work!

    — Ryan Merket    10/08/2005    #

  • What’s the difference of using href=”#” rather than the technique u demoed when creating a back to top link?

    — e    10/08/2005    #

  • If you use “name” in the anchor div, it doesn’t validate. If you use “id” it works. If you’ve already used “id” to identify the div, and you really want to do this, make whatever the div is doing a class and then use “id” to identify the anchor. This is something I wanted to do and you provided a solution (with a little work around!) for me. Thanks!

    — Susan McGinty    10/09/2005    #

  • Did you know that it does not have to be a div as this will work with any element id.
    I have it working on my site along with the :target pseudo element (for FF) to show visitors the exact place to which they have jumped.
    http://www.cssplay.co.uk/index.html
    Try the page links in the top right, the text of the jumped ‘h2’ will change color if you are using FF.

    — Stu    10/09/2005    #

If you are using Internet Explorer for the MAC, you'll notice this website looks a little strange. That's because we've chosen not to provide full CSS support for that browser. All content is still accessible, it's just not as pretty - but neither is your browser. For the full meal deal, we recommend upgrading your web browser.