Scroll to top

Just a simple 'scroll to top' widget that fades in as the viewer scrolls down the page.

by mukkaram waheed

HTML

<h1>Top of the page</h1>

<article style="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

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

JavaScript

$(document).ready(function () {

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

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

});