Back to Top

August 29th, 2013 Written by

One of the more functional features for any website with a very long page is the ever-so-useful Back to Top option. The purpose is exactly what the name suggests: clicking the link shoots the user back to the top of the page, as opposed to scrolling there manually.

As always, there is a right way and a wrong way to implement this. Far too often do we see this lazily executed with a shortcut, as described in the code below:

<a href="#top">Back to top.</a>

By default, any dead link resets the page, therefore sending the user back to the top. Unfortunately, this alters your your URL, which is bad always bad practice.

www.yoururl.com#top

Clearly, this doesn’t make to break website. However, we at Farmdog firmly believe that quality starts at the top and must trickle down into the details of any great project. This is why our creative depot hasn’t slept in weeks.

The implementation involves some basic HTML & CSS, with a little bit of Javascript. Below, we have outlined the proper way to implement this feature onto your own website.

HTML:

<span>#9650;</span> <a class="scroll-top">Back up</a>

Javascript:

$(function(){
    //Scroll to top animation
    $('.scroll-top').click(function(){
        $("html, body").animate({
            scrollTop: 0
        }, 500);
        return false;
    })

    if(!Modernizr.input.placeholder){
        $('input[placeholder], textarea[placeholder]').placeholder();
    }
});

For the ▲ next to the link, we use the code &#9650;. As we’ve discussed before (Link this to the post I’m referencing), using unicode for symbols is much better practice for then actual images. The reason being is that they load faster and are editable with CSS.

Enjoy.