Scroll Top

by Keith Jeter

HTML

<header>Top of the page</header>

<article style="padding: 52px 10px 10px 10px; height: 1000px">
    <p style="margin-bottom: 600px">Scroll down the page&hellip;</p>
    <p>Then click the box.</p>
    <a href="#" class="scrollup">Scroll</a>
</article>

CSS

body { margin: 0; padding: 0; }

.scrollup {
    width: 40px;
    height: 40px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    text-indent: -9999px;
    background: url('icon_top.png') no-repeat;
    background-color: #000;
}
header { width: 100%; height: 52px; background: #000; position: fixed; }

JavaScript

$(document).ready(function () {

    $(window).scroll(function () {
        if ($(this).scrollTop() > 52) {
            $('.scrollup').fadeIn();
        } else {
            $('.scrollup').fadeOut();
        }
    });

    $('.scrollup').click(function () {
        $("html, body").animate({
            scrollTop: 0
        }, 600);
        return false;
    });

});