• 5/14/2013
• 4571
• jQuery Tutorial, jQuery Help, Rudra Softtech LLP, Best Web Development Company

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

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.

Share It

• Tweet