JSFiddle - React, Tailwind, and code Playground

HTML

<div class="height">



 <div class="ret_block">
   <div class="ret"> </div>  
 </div>



</div>

CSS

.height {
    width: 300px;
    height: 3000px;
    background-color: #FFF;
}

.ret_block {height: 65px; width: 65px; position: absolute; opacity: 0;}

.ret {background: #80c111; opacity: 0.9; border-radius: 50% !important; cursor: move; height: 65px; position: absolute; width: 65px; z-index: 9999; cursor:pointer;}

JavaScript

$(document).ready(function(){
	

	    var top_result =  document.body.scrollHeight + 100;

 	
 	$('.ret_block').css({'position':'absolute','opacity':1,'top' : top_result + 'px','right':'100px','transition': "top 2.0s 0.05s"});
	
	
	retReturn();
	
	$(window).scroll(function() {
		
		retReturn();
		
	});
	
	$(window).resize(function() {
		
		retReturn();
		
	});
	
	
	function retReturn() {
		var wHeight = getWindowHeight();
		
		var sHeight = $(window).scrollTop();
		
		var result = wHeight + sHeight - 165;
		
		$('.ret_block').css({'position':'absolute','top' : result + 'px','right':'100px'});
	}
	
	
	function getWindowHeight() {
		
		var windowHeight;
		
		windowHeight = $(window).height();
		
		return windowHeight;
		
	}
});