The " Up " button using CSS

Question

The " Up " button using CSS

Show an example of the "Up" button that appears when the page is scrolled down, and clicking on it should return the user to the top of the page. Preferably, using CSS.

1

html css css3

Author: Dezza Simpson, 2014-03-31

Source

1 answers

score 2 · Accepted Answer

Http://jsfiddle.net/25yen/

$(document).ready(function () {

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

    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });

        $('#back-top a').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });

});

.class {
    min-height: 2000px;
    width: 400px;
    margin: 0 auto;
}
#back-top {
    position: fixed;
    bottom: 30px;
    right: 5%;
}
#back-top a {
    width: 48px;
    display: block;
    text-align: center;
    font: bold 8px Arial;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
#back-top a:hover {
    text-decoration: underline;
}
#back-top span {
    width: 48px;
    height: 48px;
    display: block;
    margin-bottom: -14px;
    background: #000;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="class">
    <div id="back-top"><a href="#top"><span></span>Вверх</a>
    </div>
</div>