How to create "Scroll To Top" link using jQuery and CSS

A jQuery example to put "scroll to top" link on any web page. Scroll down the page to see working example.

TOP
CODE
<script>
    var scrolling = false;
    $(document).ready(function () {
        $(document).bind("scroll", function () {
            if (!scrolling) {
                if ($(document).scrollTop() > 100) {
                    $(".movetop").fadeIn();
                } else {
                    $(".movetop").fadeOut();
                }
            }
        });
    });

    function movetop() {
        scrolling = true;
        $("html, body").animate({ scrollTop: "0px" }, { complete: function () { scrolling = false; } });
        $(".movetop").fadeOut();
    }
</script>
<style>
    .movetop
    {
        display:none;
        padding: 10px;
        bottom: 0px;
        left: 50%;
        width: 60px;
        margin-left: -30px;
        position: fixed;
        background: #FEBF05;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        background: rgb(254,191,1); /* Old browsers */
        background: -moz-linear-gradient(top,  rgba(254,191,1,1) 0%, rgba(254,191,1,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,191,1,1)), color-stop(100%,rgba(254,191,1,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  rgba(254,191,1,1) 0%,rgba(254,191,1,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  rgba(254,191,1,1) 0%,rgba(254,191,1,1) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  rgba(254,191,1,1) 0%,rgba(254,191,1,1) 100%); /* IE10+ */
        background: linear-gradient(to bottom,  rgba(254,191,1,1) 0%,rgba(254,191,1,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#febf01', endColorstr='#febf01',GradientType=0 ); /* IE6-9 */
        font-weight: bold;
        color: Black;
        text-decoration: none;
        text-align:center;
    }
</style>
Explanation

CSS is used to place the link at the botttom of the page.

In script I have hooked to scroll event of the document and while scrolling I check whether scrollTop property is greater than desired scroll position, if yes I show the TOP link. On click of top link I simply set scrollTop to zero and hide top link. See it easy.

Ask question related to above example and code in comment box.

Subscribe for our monthly newsletter for updated articles and useful code scripts.

Share It

comments powered by Disqus
Chat With Us Close
Leave Message