JSFiddle - React, Tailwind, and code Playground

by Alex Alexandrov

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <header>
    HEADER
  </header>
  <div class="content">
  CONTENT
  </div>
  <div class="to-top-page">To top</div>
  <footer>
    FOOTER
  </footer>
</body>
</html>

CSS

header {
  background: red;
  height: 200px;
  text-align: center;
}

.content {
  background: green;
  height: 300px;
  text-align: center;
}

footer {
  background: yellow;
  text-align: center;
  height: 300px;
}

.to-top-page { 
	position: fixed;
	background: pink;
	width: 58px;
	height: 58px;
	right: 5px;
	display: none;
	transition: bottom 0.2s;
	-webkit-transition: bottom 0.2s;
	-moz-transition: bottom 0.2s;
	-o-transition: bottom 0.2s;
	cursor: pointer;
	z-index: 9999;
	transition: .4s;
}

JavaScript

jQuery(window).scroll(function () {
    var target = jQuery('.to-top-page '),
        st = jQuery(window).scrollTop(),
        wh = jQuery(window).height(),
        dh = jQuery(document).height(),
        fh = jQuery('footer').height();
    if ( st > 0 ) {
        target.fadeIn('fast');
        if (st > dh - (wh + fh)) {
            target.css('bottom','280px');
        }
        else {
            target.css('bottom','5px');
        }
    }
    else {
        target.css({'position': 'fixed', 'bottom': '0'});
    }
});