JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">

    <p>SCROLL DOWN</p>

    <a id="button" class="animation">BUTTON</a>

</div>

CSS

#container {
    height: 800px;
}

#button {
    border: 1px solid black;
    padding: 10px;
    width: 100px;
    text-align: center;
    background-color: chartreuse;
}

.animation {
    position: fixed;
    bottom: 25px;
    right: 25px;
    opacity: 0;
    -webkit-transition: opacity .3s 0s, visibility 0s .3s;
    -moz-transition: opacity .3s 0s, visibility 0s .3s;
    transition: opacity .3s 0s, visibility 0s .3s;
}

.visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}

JavaScript

jQuery(document).ready(function($){
	
    // browser window scroll position (in pixels) where button will appear
    // adjust this number to select when your button appears on scroll-down
	var offset = 300,
	
    // duration of the animation (in ms)
	scroll_top_duration = 700,

	// bind with the button link
	$animation = $('.animation');

	// display or hide the button
	$(window).scroll(function(){
		( $(this).scrollTop() > offset ) ? $animation.addClass('visible') :
        $animation.removeClass('visible');
	});

});