JSFiddle - React, Tailwind, and code Playground

HTML

<body id="top"> <div id="pagewrap">     <h1>Demo</h1>     <h2><a href="http://webdesignerwall.com/tutorials/animated-scroll-to-top">Animated Scroll to Top</a></h2>     <p class="credits"><em>by <a href="http://webdesignerwall.com">Web Designer Wall</a></em></p>     <p>&darr; scroll down</p>     <p>&darr;</p>     <p>&darr;</p>     <p>&darr;</p>     <p>&darr;</p> <p>&darr;</p>     <p>In sollicitudin blandit cursus. Pellentesque ornare, augue ac posuere consectetur, tellus ligula feugiat lorem, id imperdiet tellus tortor ut urna. Ut eleifend rhoncus augue sit amet dignissim. In mattis lobortis imperdiet. Aliquam molestie nisi et purus mattis volutpat. Cras dignissim, arcu vel pretium interdum, turpis sapien rutrum felis, non condimentum nulla orci ornare tellus. In laoreet tristique mauris, in accumsan quam commodo ac. Nam fringilla sapien sed nibh vehicula at rutrum metus blandit. Mauris eleifend, velit eget lacinia ullamcorper, elit sapien malesuada orci, fringilla imperdiet enim ante at velit. Vestibulum posuere dictum sapien, id volutpat sapien auctor non. Fusce convallis elit sagittis augue venenatis tempor in eget ligula. Curabitur at diam leo, eu convallis purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin molestie nunc massa. Quisque tempor neque in sem laoreet vel dictum magna commodo. In elementum, turpis sed bibendum sollicitudin, augue leo malesuada dolor, ut hendrerit lectus libero id purus.</p>     <p>&darr;</p>     <p>&darr;</p>     <p>&darr;</p> <h3><a href="http://themify.me">Themify.me</a></h3>     <p>Mauris ornare rhoncus sem, non euismod tortor rhoncus ac. Aliquam erat volutpat. Fusce justo purus, convallis sed feugiat nec, aliquet et ipsum. Nullam dapibus semper risus eu accumsan. Nulla facilisis eros ac ligula sodales suscipit. Fusce pellentesque iaculis dignissim. Phasellus tristique neque vitae justo laoreet tempus. Duis dignissim mollis lectus, id mollis tortor dignissim ut. Proin non velit...

CSS

body {     font: .88em/150% Arial, Helvetica, sans-serif;     margin: 30px auto; } h1 {     font: bold 80%/120% Arial, Helvetica, sans-serif;     text-transform: uppercase;     margin: 0 0 10px;     color: #999; } h2 {     font-size: 2.5em;     margin: 0 0 8px; } h3 {     font-size: 1.6em;     margin: 20px 0 5px; } a {     color: #69C;     text-decoration: none; } a:hover {     color: #F30; } p {     margin: 0 0 10px; } em {     font: italic 100% "Times New Roman", Times, serif; } .credits {     border-bottom: solid 1px #eee;     padding-bottom: 10px;     margin: 0 0 30px; } #pagewrap {     margin: 0 auto;     width: 600px;     padding-left: 150px;     position: relative; }  /* Back to top button  */ #back-top {     position: fixed;     bottom: 30px;     margin-left: -150px; } #back-top a {     width: 108px;     display: block;     text-align: center;     font: 11px/100% Arial, Helvetica, sans-serif;     text-transform: uppercase;     text-decoration: none;     color: #bbb;     /* background color transition */     -webkit-transition: 1s;     -moz-transition: 1s;     transition: 1s; } #back-top a:hover {     color: #000; } /* arrow icon (span tag) */ #back-top span {     width: 108px;     height: 108px;     display: block;     margin-bottom: 7px;     background: #ddd url(up-arrow.png) no-repeat center center;     /* rounded corners */     -webkit-border-radius: 15px;     -moz-border-radius: 15px;     border-radius: 15px;     /* background color transition */     -webkit-transition: 1s;     -moz-transition: 1s;     transition: 1s; } #back-top a:hover span {     background-color: #777; }

JavaScript

$(document).ready(function() {
    // hide #back-top first     
    $("#back-top").hide();
    // fade in #back-top     
    $(function() {
        $(window).scroll(function() {
            if ($(this).scrollTop() > 100) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });
        // scroll body to 0px on click       
        $('#back-top a').click(function() {
            $(window).animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });
});