JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://unpkg.com/popper.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
   <div class="thumb_wrap">
   <!-- Open Chat -->
    <a aria-label="Open chat" href="#" style="display: block;">
        <div class="sub_chat_wrap">        <span class="fa-stack fa-lg">
            <span class="fa fa-arrow-up scroll_icon"></span>
        </span>
            <span class="scroll_text">MIBlue Chat</span>
        </div>
    </a>
    <!-- Open Chat -->

    <!-- Scroll to Top -->
    <a aria-label="Back to top" id="toTop" href="#" class="scrollup" style="display: block;">
        <span class="fa-stack fa-lg">
            <span class="fa fa-arrow-up scroll_icon"></span>
        </span>
        <span class="scroll_text">Back to top</span>
    </a>
    
    <!-- Scroll to Top -->
    </div>
    
    <div class="col-12 nauv nill"></div>
    <div class="col-12 redd3 nill"></div>
    <div class="col-12 redd2 nill"></div>
    <div class="col-12 redd1 nill"></div>

CSS

body { height: 990px; }

.sub_chat_wrap {
  position: fixed;
  width: 40px;
  height: 40px;
  background: #000;
  border-radius: 50%;
  right: 65px;
  /* bottom: 42px; */
  z-index: 2;
  transition:all 0.3s ease-in;
  transition:all 0.3s ease-out;
}

.sub_slide { right: 14px; }

.scrollup {
  display: none;
  z-index: 2;
  position: fixed;
  /* bottom: 30px; */
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #0144af;
  transition:all 0.3s ease-in;
  transition:all 0.3s ease-out;
}

.scroll_text {
  display: block;
  padding: 2px;
  position: absolute;
  background: #fff;
  font-size: .75em;
  line-height: 1em;
  text-align: center;
  border-radius: 5px;
  color: #0144af;
}

.scroll_icon { 
  color: #ffffff;
  font-size: 20px;
  margin: 0px 0 0 11px;
}

.min_chat_wrap {
  display: block;
  position: fixed;
  right: 70px;
  /* bottom: 30px; */
  z-index: 2;
  /* height: 35px; */
  text-align: center;
  transition:all 0.3s ease-in;
  transition:all 0.3s ease-out;
}

.thumb_wrap {
  display: block;
  position: absolute;
  overflow: hidden;
  height: 75px;
  width: 100px;
  background: pink;
  right: 0;
  bottom: 10px;
}

.nill { padding: 0; margin: 0; }
.nauv { height: 100px; background: white; }
.redd1 { height: 500px; background: #ff1a1a; }
.redd2 { height: 500px; background: #990000; }
.redd3 { height: 500px; background: #4d0000; }

@media only screen and (max-width: 767px) {

  .scroll_text { display: none; }
/*   .scrollup { bottom: 10px; }
  .sub_chat_wrap { bottom: 2px; } */
  .thumb_wrap { bottom: 0; }
}

JavaScript

// $(document).ready(function () {

    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $('.scrollup').fadeIn();
            $('.scrollup').show();
            $('.sub_chat_wrap').removeClass('sub_slide'); //for sample one

        } else {
            $('.scrollup').fadeOut();
            $('.scrollup').hide();
            $('.sub_chat_wrap').addClass('sub_slide'); //for sample one
        }
    });

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

// });