Animated Scroll to Top

Due to a number of requests, I'm writing a detail tutorial on how to create an animated scroll to top as seen on Web Designer Wall. It is very simple to do with jQuery (just a few lines of code). It checks if the scrollbar top position is greater than certain value, then fade in the scroll to top button. Upon the link is clicked, it scrolls the page to the top. View the demo to see it in action.

DEMOScroll to Top

DOWNLOADDemo Zip

Design & CSS

Declare the #back-top elment with position:fixed so it stays fixed on the page. The span tag is optional. I added the span tag to display the arrow graphic. I also added transition:1s (1s = 1 second) to create the fading effect on mouse over.

Take a look at this step demo (note: the jQuery part is not implemented yet).

#back-top {

    position: fixed;

    bottom: 30px;

    margin-left: -150px;

}

#back-top a {

    width: 108px;

    display: block;

    text-align: center;

    font: 11px/100% Arial, Helvetica, sans-serif;

    text-transform: uppercase;

    text-decoration: none;

    color: #bbb;

    /* transition */

    -webkit-transition: 1s;

    -moz-transition: 1s;

    transition: 1s;

}

#back-top a:hover {

    color: #000;

}

/* arrow icon (span tag) */

#back-top span {

    width: 108px;

    height: 108px;

    display: block;

    margin-bottom: 7px;

    background: #ddd url(up-arrow.png) no-repeat center center;

    /* rounded corners */

    -webkit-border-radius: 15px;

    -moz-border-radius: 15px;

    border-radius: 15px;

    /* transition */

    -webkit-transition: 1s;

    -moz-transition: 1s;

    transition: 1s;

}

#back-top a:hover span {

    background-color: #777;

}

jQuery Part (Demo)

Below is the Javascript code (you can paste it any where on the page). Basically, it hides the #back-top element (it is the <p id="back-top"> tag in my demo) initially . Then it checks if the window scrollbar top position (scrollTop) is greater 100, then fade in the #back-top element, else fade out. The next set of code is the click function. If the #back-top link is clicked, it will animate the body scrollTop to 0.

If you want to learn some basic jQuery coding, read my jQuery for Designers tutorial.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

$(document).ready(function(){

    // hide #back-top first

    $("#back-top").hide();

    // fade in #back-top

    $(function () {

        $(window).scroll(function () {

            if ($(this).scrollTop() > 100) {

                $('#back-top').fadeIn();

            } else {

                $('#back-top').fadeOut();

            }

        });

        // scroll body to 0px on click

        $('#back-top a').click(function () {

            $('body,html').animate({

                scrollTop: 0

            }, 800);

            return false;

        });

    });

});

No Javascript Fallback

Note the back to top button is linking to anchor #top which is the ID of the <body> tag. Technically speaking you don't need to assign any anchor link because jQuery can scroll the page to any position. However, it is nice to include it because it provides a fallback if Javascript is not supported.