JSFiddle - React, Tailwind, and code Playground

by ingyu kang

HTML

<script src="http://code.jquery.com/jquery-latest.js"></script>
<div id="main">main</div>
<div id="sidebar">sidebar</div>
<a id="toTop" href="#">TOP</a>

CSS

#main {height : 1500px; width: 400px; background-color:#53ffff; float: left;}
#sidebar {height : 500px; width: 200px; background-color:#ffff53;float: left;}
#toTop {
  position: fixed;  
  bottom: 100px;
  display: none;
  z-index: 9999;
}

JavaScript

$(function() {
    $(window).scroll(function() {
        if ($(this).scrollTop() > 200) {
            $('#toTop').fadeIn();            
            $('#toTop').css('left', $('#sidebar').offset().left);
        } else {
            $('#toTop').fadeOut();
        }
    });
    
    $("#toTop").click(function() {
        $('html, body').animate({
            scrollTop : 0
        }, 400);
        return false;
    });
});