Brian Cray ··· Home > Blog > Javascript, Css > Disappearing "Scroll to top" link with jQuery and CSS

Disappearing "Scroll to top" link with jQuery and CSS

Seen in many forms, such as "Back to top," "Top of page," or "Scroll to top," these links provide a way for users to jump to the top of the page, back to navigation and other handy stuff.

This tutorial will help you build a scroll to top link, or whatever you call it, that appears when the user scrolls down, and disappears when users reach the top of the page using a combination of CSS and jQuery (a free javascript framework). You'll need to download jQuery if you aren't using it already.

The HTML

<div id="top"></div>
<!-- put all of your normal content stuff here -->
<div id="message"><a href="top">Scroll to top</a></div>

The CSS

#message a
{
    /* display: block before hiding */
    display: block;
    display: none;

    /* link is above all other elements */
    z-index: 999; 

    /* link doesn't hide text behind it */
    opacity: .8;

    /* link stays at same place on page */
    position: fixed;

    /* link goes at the bottom of the page */
    top: 100%;
    margin-top: -80px; /* = height + preferred bottom margin */

    /* link is centered */
    left: 50%;
    margin-left: -160px; /* = half of width */

    /* round the corners (to your preference) */
    -moz-border-radius: 24px;
    -webkit-border-radius: 24px;

    /* make it big and easy to see (size, style to preferences) */
    width: 300px;
    line-height: 48px;
    height: 48px;
    padding: 10px;
    background-color: #000;
    font-size: 24px;
    text-align: center;
    color: #fff;
}

The jQuery

$(function () {

    /* set variables locally for increased performance */
    var scroll_timer;
    var displayed = false;
    var $message = $('#message a');
    var $window = $(window);
    var top = $(document.body).children(0).position().top;

    /* react to scroll event on window */
    $window.scroll(function () {
        window.clearTimeout(scroll_timer);
        scroll_timer = window.setTimeout(function () {
            if($window.scrollTop() <= top)
            {
                displayed = false;
                $message.fadeOut(500);
            }
            else if(displayed == false)
            {
                displayed = true;
                $message.stop(true, true).show().click(function () { $message.fadeOut(500); });
            }
        }, 100);
    });
});

Conclusion

You're all done! Combine the HTML, CSS, and jQuery code together into one file, or separate them out into your existing external stylesheet and javascript files. Don't forget to put your CSS inside the <head> element and your javascript (jQuery) right before the </body> tag, always.