JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<div class="scrollUp">&#9650;</div>

<div class="message" style="top: 150px">Hidden</div>

<div class="message" style="top: 300px">Start Appearing <span>▶</span> </div>
<div class="message" style="top: 400px">opacity: 0.5 <span>▶</span> </div>
<div class="message" style="top: 500px">Finish Appearing <span>▶</span> </div>

CSS

body {
    /*background: rgb(30,87,153);
    background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(30,87,153,1) 60%, rgba(32,124,202,1) 60%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(60%,rgba(30,87,153,1)), color-stop(60%,rgba(32,124,202,1)), color-stop(100%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(30,87,153,1) 60%,rgba(32,124,202,1) 60%,rgba(255,255,255,1) 100%);
    background: linear-gradient(top, rgba(30,87,153,1) 0%,rgba(30,87,153,1) 60%,rgba(32,124,202,1) 60%,rgba(255,255,255,1) 100%);
    background-repeat: no-repeat;
    background-size: 100% 500px;*/
    
    height: 2000px;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 80%;
}

.scrollUp {
    cursor: pointer;
    display: block; position: fixed;
    top: 20px; right: 20px;
    width: 60px; height: 60px;
    z-index: 950;
    
    cursor: pointer;
    background: #555;
    background: rgba(0,0,0,0.5);
    -webkit-border-radius: 10px;
     -khtml-border-radius: 10px;
       -moz-border-radius: 10px;
        -ms-border-radius: 10px;
         -o-border-radius: 10px;
            border-radius: 10px;
    color: #eee; color: rgba(255,255,255,0.75);
    font-size: 2.5em; line-height: 1.8em;
    text-align: center;
}
.message {
    position: absolute;
    right: 100px;
    padding: 0.5em;
    margin-top: -1.25em;
    cursor: default;
    border: 1px solid rgba(0,0,0,0.2);
    background: rgba(255,255,255,0.75);
    -webkit-border-radius: 4px;
     -khtml-border-radius: 4px;
       -moz-border-radius: 4px;
        -ms-border-radius: 4px;
         -o-border-radius: 4px;
            border-radius: 4px;
    -webkit-box-shadow: rgba(0,0,0,0.1) 0px 1px 2px, inset rgba(0,0,0,0.1) 0px -5px 15px;
     -khmtl-box-shadow: rgba(0,0,0,0.1) 0px 1px 2px, inset rgba(0,0,0,0.1)...

JavaScript

/*jQuery.fn.scrollUpButton = function() {*/
    
$(document).ready(function() {
    var start = 300;
    var duration = 200;
    var scrolled;
    var content = '&#9650;';

    $('.scrollUp').css('opacity', '0.0');

    $(window).scroll(function() {
        var opacity = (scrolled - start) / duration;
        scrolled = $(window).scrollTop();
        if (0 < opacity) {
            $('.scrollUp').css('display', 'block').css('opacity', opacity);
        } else if (1 < opacity) {
            $('.scrollUp').css('display', 'block').css('opacity', '1.0');
        } else {
            $('.scrollUp').css('display', 'none').css('opacity', '0.0');
        }
    });
    $('.scrollUp').click(function() {
        $('html, body').animate({
            scrollTop: 0
        }, 500);
    });  
});

/*};*/


/*$(document).ready(function() {
    $('html').scrollUpButton({
        start: 500;
        duration: 300;
        content: '△';
    });
});*/