sample back to top

by Akram kamal

HTML

<body id="top">
    <div id="wrap">
        
<h1><a href="http://www.w3bees.com/2013/08/animated-scroll-to-top-with-jquery.html">Animated Scroll to Top with jQuery</a></h1>

        <p>&darr; scroll down</p>
        <p>&darr;</p>
        <p>&darr;</p>
        <p>&darr;</p>
        <p>&darr;</p>
        <p>&darr;</p>
        <img src="http://31.media.tumblr.com/4b2f403986699bdf0da7587610ff41a8/tumblr_mrulmgDy7F1qfthy3o1_500.jpg" alt="">
        <p>Scroll down</p>
        <p>&darr;</p>
        <p>&darr;</p>
        <p>&darr;</p>
        <img src="http://24.media.tumblr.com/7c2e88eef416638f0f68d870fc15e2ba/tumblr_mrmqiqNnXN1qfthy3o1_500.jpg" alt="">
        <p>&darr; scroll down</p>
        <p>&darr;</p>
        <p>&darr;</p>
        <p>&darr;</p>
        <p>&darr;</p>
        <p>&darr;</p>
        <img src="http://31.media.tumblr.com/fbbcd990f0bff56b58647888114351cd/tumblr_mrultpqkXI1qfthy3o1_500.jpg" alt="">
        <p>&copy w3bees.com</p>
        <div id="back-top">
            <!-- scroll top button -->	<a href="#top"><span></span>back to top</a>

        </div>
        <div id="footer">Shamelessly stolen from Stack Overflow.
            <br />1
            <br />1
            <br />1
            <br />1
            <br />1
            <br />1
            <br />1
            <br />1
            <br />1
            <br />1</div>

CSS

#back-top {

    position: fixed;

    bottom: 100px;

    right: 60px;
    display: none;

}

#back-top a {

    width: 44px;

    display: block;

    text-align: center;

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

    text-transform: uppercase;

    text-decoration: none;

    color: #bbb;

    /* background color transition */

    -webkit-transition: 1s;

    -moz-transition: 1s;

    transition: 1s;

}

#back-top a:hover {

    color: #293aa0;

}

/* arrow icon (span tag) */

#back-top span {

    width: 44px;

    height: 44px;

    display: block;

    margin-bottom: 7px;

    background: #ddd url('/shop/templates/bc_paintify/img/icons/top.png') no-repeat center center;

    /* rounded corners */

    -webkit-border-radius: 5px;

    -moz-border-radius: 5;

    border-radius: 5;

    /* background color transition */

    -webkit-transition: 1s;

    -moz-transition: 1s;

    transition: 1s;

}

#back-top a:hover span {

    background-color: #293aa0;

}

#back {

    font-weight: bold;

    font-size: 22px;

    padding:10px;

    border: 2px solid #333;

    border-radius: 29px;

}

JavaScript

$(function() {
// cache scroll to top button
var b = $('#back-top');
// Hide scroll top button
b.hide();
// FadeIn or FadeOut scroll to top button on scroll
$(window).on('scroll', function(){
    // if you scroll more then 400px then fadein goto top button
    if ($(this).scrollTop() > 500) {
        b.fadeIn();
    // otherwise fadeout button
    } else {
        b.fadeOut();
    }

});
// Animated smooth go to top
b.on('click', function(){
    $('html,body').animate({
        scrollTop: 0
    }, 2000 );
    return false;
});
});