Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How To Create A Scroll To Top Button

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.



This post first appeared on Web Design & Development Blog -, please read the originial post: here

Share the post

How To Create A Scroll To Top Button

×

Subscribe to Web Design & Development Blog -

Get updates delivered right to your inbox!

Thank you for your subscription

×