Scroll to top

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

HTML

<h1>Top of the page</h1>

<article>
    <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("url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='%23F00'/><stop offset='90%' stop-color='%23fcc'/> </linearGradient><rect fill='url(%23gradient)' x='0' y='0' width='100%' height='100%'/></svg>");
    
    
    color: white; text-shadow: 2px 2px rgba(0,0,0,0.4);}") 
    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;
    });

});