JSFiddle - React, Tailwind, and code Playground

HTML

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed animi perspiciatis ratione reiciendis quisquam quibusdam, officia dignissimos, illo? Provident recusandae totam in, culpa! Quos cupiditate non veniam recusandae beatae et nostrum, velit ipsam aperiam voluptas quas porro odio quam adipisci hic temporibus atque similique eius quibusdam, rem culpa aliquam a, esse! Ipsam quae tenetur dolores veritatis quidem, rem sapiente consequatur eligendi alias eum nisi inventore illum beatae recusandae ullam excepturi. Doloremque architecto repudiandae, consequatur atque harum perspiciatis ea sint aperiam laudantium eaque accusantium dolorum, vel minima nisi temporibus itaque iure ipsam omnis, magni molestiae neque. Autem ipsa sed natus iste laboriosam aperiam tenetur quae illum nulla maxime rerum hic velit ipsum voluptatum fugit ullam sapiente, adipisci quidem maiores amet quas omnis vel officia similique! Eligendi eveniet sed laborum dolor modi nisi consequuntur, ducimus! Natus, incidunt. Dolorum ut ipsa sunt nisi hic ipsum quasi, cumque magni tenetur, ea consectetur obcaecati earum in ex maxime, voluptates beatae optio nihil aliquid deleniti. Obcaecati rerum iusto cumque, hic quod ipsum laboriosam, ex tempore earum in est similique nesciunt, magni deserunt at culpa dicta, maiores modi ad accusantium unde. Iusto minima molestias voluptatibus nam mollitia excepturi incidunt facere, velit, magni! Molestiae vitae quasi itaque inventore placeat error iusto blanditiis omnis rerum, unde eius labore consectetur, deserunt natus, quaerat excepturi cupiditate nemo, eum modi libero! Error consequuntur illum aut dolore eos fugiat autem quam voluptates atque beatae ex, perspiciatis, veritatis ducimus dignissimos incidunt sint sapiente. Quos similique distinctio harum, mollitia veritatis quisquam architecto tenetur, totam quas saepe corrupti, vitae quidem, quibusdam sequi ratione iste! Ullam ipsa quibusdam error vitae ex aspernatur! Illo commodi, molestiae eos iure dolore...

JavaScript

(function(){
			var color= 'red';
			var fhwScrollerDiv = document.createElement('div');
			fhwScrollerDiv.innerHTML='<svg width="50" height="50" viewbox="0 0 100 100"><circle  fill="'+color+'" cx="50" cy="50" r="50" /><path stroke="white" stroke-width="16" stroke-linecap="round" d="M50 80 L50 20 M50 20 L80 50 M50 20 L20 50"/></svg>';
			fhwScrollerDiv.style.cssText='z-index:1000;position:fixed;bottom:10px;right:10px;cursor:pointer;display:none;transition:all 0.5s;';
			document.body.appendChild(fhwScrollerDiv);
			var _=fhwScrollerDiv.style;
			window.onscroll = function() {
				if (this.pageYOffset > 200) {
					_.opacity = "0.5";
					_.display = "block";
				} else {
					_.opacity = "0";
					_.display = "none";
				}
			};
			fhwScrollerDiv.onmouseover = function() {
			  _.opacity = "1";
			};
			fhwScrollerDiv.onmouseout = function() {
			  _.opacity = "0.5";
			};
			var scrollen = function(){
				var scrollDuration = 500,
				scrollHeight = window.pageYOffset,
				scrollStep =  scrollDuration / 15 , 
				scrollCount = 0,
				scrollInterval = setInterval( function() {
					if ( window.pageYOffset != 0 ) {
						scrollCount = scrollCount + 1;  
						window.scrollTo( 0, ( scrollHeight-scrollCount*scrollStep) );
					} 
					else clearInterval(scrollInterval); 
					},15 );
				
			}
			fhwScrollerDiv.onclick = scrollen;	
			fhwScrollerDiv.addEventListener('touchstart', function(){
				event.preventDefault();
				scrollen();
			});
			})();