JSFiddle - React, Tailwind, and code Playground

by GMK Hussain

HTML

<p>some text here</p>
<p>logo designer</p>
    <p>some text here</p>
<p>logo designer</p>
    <p>some text here</p>
<p>logo designer</p>
    <p>some text here</p>
<p>logo designer</p>
    <p>some text here</p>
<p>logo designer</p>
    <p>some text here</p>
<p>logo designer</p>
    <p>some text here</p>
<p>logo designer</p>
    <p>some text here</p>
<p>logo designer</p>
    <p>some text here</p>
<p>logo designer</p>
    
<a href="#" class="scrollToTop">Scroll To Top</a>

CSS

.scrollToTop{
	width:100px; 
	position:fixed;
	top:75px;
	right:40px;
	display:none;
}

JavaScript

$(document).ready(function(){
	//Check to see if the window is top if not then display button
	$(window).scroll(function(){
		if ($(this).scrollTop() > 100) {
			$('.scrollToTop').fadeIn();
		} else {
			$('.scrollToTop').fadeOut();
		}
	});
	
	//Click event to scroll to top
	$('.scrollToTop').click(function(){
		$('html, body').animate({scrollTop : 0},800);
		return false;
	});
	
});