JSFiddle - React, Tailwind, and code Playground

by orlov0562

HTML

<div class="container">
 <script>
  for (var i = 0; i < 500; i++) document.write('some text '+i+'<br>');
 </script>
</div>

<a id="page-scroller" title="Прокрутить страницу вверх"></a>

CSS

body {background-color: green; margin:0;padding:0;}
.container {width: 50%;background-color: white;margin: 0 auto;}

#page-scroller {
  display: none;
  position: fixed;
  cursor: pointer;
  top: 0;
  width: 75px;
  height: 100%;
  background-color: black;
  opacity: 0.15;
}

JavaScript

function showScroller() {
  var freeSpace = $(window).width() / 2 - $('body>div.container').width() / 2 - $('#page-scroller').width();
  var showScroller = (freeSpace > 50) && ($(this).scrollTop() > 0);
  if (showScroller) {
    $('#page-scroller:hidden').fadeIn();
  } else {
    $('#page-scroller:visible').fadeOut();
  }
}

$(function() {

  $(window).resize(function() {
    showScroller();
  });


  $(window).scroll(function() {
    showScroller();
  });

  $('#page-scroller').click(function() {
    $('body,html').animate({
      scrollTop: 0
    }, 400);
    return false;
  });

  showScroller();

});