JSFiddle - React, Tailwind, and code Playground

by nayish

HTML

<!DOCTYPE html>
<html>
<head>
<title>Rough</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>
<style type ="text/css">
.scrollup {
width: 40px;
height: 40px;
position: fixed;
bottom: 50px;
right: 100px;
display: none;
text-indent: -9999px;
background: url('http://media.tumblr.com/8bdbe6de1674e160de31a867011f5aa7/tumblr_inline_mj3ypw4eco1qz4rgp.png') 100% no-repeat; 
background-color: #000;
      background-size: cover;
}
</style>
<script>
$(document).ready(function () {

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

$('.scrollup').click(function () {
    $("html, body").animate({
        scrollTop: 0
    }, 600);
    return false;
});

});
</script>
</head>
<body>
<h1>Top of the page</h1>

<article style="height: 1000px">
<p style="margin-bottom: 600px">Scroll down the page&hellip;</p>
<p>Then click the box.</p>
<a href="#" class="scrollup">Scroll</a>
</article>
</body>
</html>