JSFiddle - React, Tailwind, and code Playground

by Stas Orekhovskiy

HTML

<div id="back-top" style="">
	<a href="#top" class="top-btn" title="Вверх"></a>
</div>

CSS

#back-top {
  position: fixed;
  right: 20px;
  z-index: 99;
  bottom: 20px;
}

.top-btn {
  display: block;
  width: 66px;
  height: 66px;
  background: url("https://uacredits.com/wp-content/themes/ua/img/btn-top.png") center center no-repeat;
  -webkit-background-size: 100%;
  background-size: 100%;
  clear: both;
  overflow: hidden;
}

JavaScript

jQuery(document).ready(function ($) {
		// Button up
		jQuery("#back-top").hide();
		jQuery(window).scroll(function () {
			if (jQuery(this).scrollTop() > 100) {
				jQuery('#back-top').fadeIn();
			} else {
				jQuery('#back-top').fadeOut();
			}
		});
		jQuery('#back-top a').click(function () {
			jQuery('body,html').animate({
				scrollTop: 0
			}, 800);
			return false;
		});

	});