JSFiddle - React, Tailwind, and code Playground

HTML

<div id="asd">
скролл вниз
</div>
<div id="dsa">
<div id="intopbutton"></div>   
</div>

CSS

#intopbutton {     
								display: none;
								background-color: purple; 
								width: 50px; 
								height: 50px; 
								border-radius: 50%;
								text-align:center;
								font-size:20px;
								line-height:48px;
								border: 1px black solid;  
							} 
							 
							 
							@keyframes  intopbutton{
								0% {
					transform: translateY(-100px); }
				100% {
						transform: translateX(0); }
							}
							.animatedPopUp {   
								 animation: 1s  intopbutton;
								}
								
								@keyframes  buttonback{
								0% {
					transform: translateY(0); }
				100% {
						transform: translateY(-100px); }
							}
							.animationOut {    
								 animation: 1s  buttonback;
								}
								#intopbutton:hover { 
									background-color: white; 
									}
                  
                  
                  
               
                  div,body { margin: 0 0 0 0; padding: 0 0 0 0 ; }
                  
                  #asd {height: 1500px;   background-color: lightgrey; }
                    #dsa {height: 200px;   background-color: lightgrey; }

JavaScript

window.onscroll = function(ev) {
	
	
			let displaynone = () => document.getElementById('intopbutton').style.display="none";
   
   
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) { 
	document.getElementById('intopbutton').classList = ' animatedPopUp ';	
			 document.getElementById('intopbutton').style.display="block";  
			 document.getElementById('intopbutton').removeEventListener("animationend", displaynone); 
    } else  { 
			document.getElementById('intopbutton').classList = ' animationOut ';	
			document.getElementById('intopbutton').addEventListener("animationend", displaynone); 
		}
};