exscale.se

Only show top-links if they are needed using jQuery and Dimensions

Published Wednesday, January 16, 2008 in jQuery, Progressive Enhancement, Usability

A link in the footer pointing to the top of your site is quite common and, as most people don't know about/use PgUp (or something similar), can be helpful, ... although perhaps we should educate users instead and stop replicating browser/os-behavior, like so many suggest we do with print-links and such.

Nevertheless, here's a little snippet of jQuery that will hide top-links on your site unless they're needed (ie, there's a visible scrollbar).

The function needs to know what your top-links are pointing to, but if you don't supply a value it defaults to '#'. Which is what I always link my top-links to as every browser I've ever come across takes you to the top of the page when you click a link with an href-attribute-value of '#'.

function hideTopLinks(topLinksHref) {
    var href = topLinksHref || '#';
    var topLinks = $('a[href="' +href +'"]');

    if($(window).height() >= $(document).height()) {
        topLinks.each(function() {
            topLink = $(this);
            if(topLink.is(':only-child')) {
                topLink.parent().hide();
            }
            else {
                topLink.hide();
            }
        });
    }
}

You may wanna put that function in your project object (whoa, what a rhyme!), I, for example, keep that function in aFramework.general.hideTopLinks();

Have fun!

Andreas

Thursday, February 28, 2008 | View all comments by Andreas

I just realized that almost every link added with JS to do stuff points to '#'. So I may have to change either my top-links or all my JS-links...