JSFiddle - React, Tailwind, and code Playground

by Bhavik Patel

HTML

<a class="movetop" href="javascript: movetop()" style="display: inline;">
							<img src="images/mobile/arrow-up.png" alt="" />
					</a>
<table border="2">
            <tr >
                <td>1</td>
                <td>2</td>
                <td>3</td>
        </tr>
        <tr >
                <td>1</td>
                <td>2</td>
                <td>3</td>
        </tr>
        <tr >
                <td>1</td>
                <td>2</td>
                <td>3</td>
        </tr>
        <tr >
                <td>1</td>
                <td>2</td>
                <td>3</td>
        </tr>
        <tr >
                <td>1</td>
                <td>2</td>
                <td>3</td>
        </tr>
        <tr >
                <td>1</td>
                <td>2</td>
                <td>3</td>
        </tr>
        <tr >
                <td>1</td>
                <td>2</td>
                <td>3</td>
        </tr>
        <tr >
                <td>1</td>
                <td>2</td>
                <td>3</td>
        </tr>
        <tr >
                <td>1</td>
                <td>2</td>
                <td>3</td>
        </tr>
            <tr >
                <td>1</td>
                <td>2</td>
                <td>3</td>
        </tr>
        <tr >
                <td>1</td>
                <td>2</td>
                <td>3</td>
        </tr>
        <tr >
                <td>1</td>
                <td>2</td>
                <td>3</td>
        </tr>
        <tr >
                <td>1</td>
                <td>2</td>
                <td>3</td>
        </tr>
        <tr >
                <td>1</td>
                <td>2</td>
                <td>3</td>
        </tr>
        <tr >
                <td>1</td>
                <td>2</td>
                <td>3</td>
        </tr>
        <tr >
                <td>1</td>
                <td>2</td>
                <td>3</td>
        </tr>
        <tr >
                <td>1</td>
                <td>2</td>
               ...

CSS

.movetop
    {
        display:none;
        padding: 10px;
        bottom: 0px;
        left: 93%;
        width: 30px;
        margin-left: -30px;
        position: fixed;
        background: #FEBF05;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#febf01', endColorstr='#febf01',GradientType=0 ); /* IE6-9 */
        font-weight: bold;
        color: Black;
        text-decoration: none;
        text-align:center;
    }

JavaScript

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();
    }