JSFiddle - React, Tailwind, and code Playground

HTML

<span id="scrollMore" style="opacity: 1;">
Scroll for More
<em>↓</em>
</span>

<div class="banner">
    <img src="http://lorempixel.com/920/700/" alt="">
</div>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>

CSS

html,
body {
    height: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}


div img {
    display: block;
    width: 100%;
}

div.banner {
    width: 100%;
    position: relative;
}

div.social, div.title {
    position: fixed;
    z-index: 10;
}

div.social {
    right: 40px;
    bottom: 40px;
    background: #e4f;
}

div.title {
    left: 40px;
    bottom: 40px;
    background: #e4f;
}


#scrollMore {
    background: url("http://www.wiltshirefarmfoods.com/images/scrollMore.png") no-repeat scroll center bottom transparent;
    bottom: 0;
    cursor: pointer;
    height: 42px;
    position: fixed;
    right: 36px;
    text-indent: -9999px;
    width: 124px;
    z-index: 100;
}

JavaScript

if($('#scrollMore').css('position')=='absolute'){$('#scrollMore').hide();
    }
    
    else
    {
        $(window).scroll(function(){
            var opacity=1.3-($(window).scrollTop()/500);
            if(opacity>1)opacity=1;if(opacity<0)opacity=0;$('#scrollMore').fadeTo(50,opacity);});$('#scrollMore').click(function(){$('html,body').animate({scrollTop:$(window).scrollTop()+400+'px'},300);}).hover(function(){$(this).fadeTo(200,1);});}