Quantcast
Channel: Web Design & Development Blog » Uncategorized
Viewing all articles
Browse latest Browse all 10

How To Create A Scroll To Top Button

0
0

Create a simple scroll to top button

1. Add your button to your markup with the class of scroll-top

<div class="scroll-top">Scroll Up</div>

2. Apply the following CSS to you stylesheet

.scroll-top {
    padding: 15px 10px;
    position: fixed;
    bottom: 25px;
    right: 25px;
    display: none;
    background-color: #000;
    opacity: .7;
    color:white;
    font-family: helvetica, arial, sans-serif;
    font-weight: bold;
}

3. Add the following JavaScript to the bottom of your markup above the closing body tag

$(document).ready(function () {

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

    $('.scroll-top').click(function () {
        $("html, body").animate({
            scrollTop: 0
        }, 500);
        return false;
    });

});

4. Also make sure you are including jQuery in your head section for this to work

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

There you go, you should now have a working scroll to top button.


Viewing all articles
Browse latest Browse all 10

Latest Images

Trending Articles



Latest Images