JSFiddle - React, Tailwind, and code Playground

HTML

<title>SNAPCHAT</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,300' rel='stylesheet' type='text/css'>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
     <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
     <script src="js/jquery.stellar.js"></script>
    <script src="js/scrip.js"></script>
    <script src="js/jquery.nicescroll.js"></script>

    
</head>
<body>
<a id="nav1"></a>
<a id="nav2"></a>
<a id="nav3"></a>
<a id="nav4"></a>

<a href="#" class="back-to-top">Back to Top</a>
   <div id="nav">
	<!-- <div id="logo"><img src=""></div>  -->   
	
		<ul>
			<li><a href="http://mediacentral.ie/" class="nav-icon" title="Home">Home</span></a></li>	
			<li><a href="nav1">Sponsored Snapchat</a></li>
			<li><a href="nav2">Snapchat Content</a></li>
			<li><a href="nav3">Display Ads</a></li>
			<li><a href="nav4">Media Central</a></li>
		</ul>


</div id="main">
   
    <div id="nav1" class="image" data-stellar-background-ratio="0.5" >
<!-- 	<div id="content_1" class="content1">
 -->       
        
        
    </div>
        
        
    </div>
	</div>
    
	
    <div id="nav2" class="image" data-stellar-background-ratio="0.4"  ></div>
<!--     <div id="content_1" class="content2">
 -->        
        
    </div>
	
    <div id="nav3" class="image" data-stellar-background-ratio="0.4"  ></div>
<!--     <div id="content_1" class="content3">
 -->        
        
        
        
    </div>
	
	<div id="nav4" class="image" data-stellar-background-ratio="0.4"  ></div>
<!--     <div id="content_1" class="content4">
 -->        
        
        
        
    </div>

CSS

* {
    margin: 0 auto;
    padding: 0;
	}
.image {
    height: 750px;
    width: 100%;
    /*background: #55e6c5;*/
    }

.content {
    height: 750px;
    width:100%;
/*     background: white;*/    
	z-index: 2;
}
.content h1 {
    font-size: 40px;
    color: #464646;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    margin: 30px 60px;
}
.content p {
    font-size:20px;
    color: #343434;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    margin: 30px 60px;
}

#nav1 {
    background: url(../images/bg1.png);
    background-attachment: fixed;
	position: relative;
	height: 130%0%;
	padding:80px;
	text-align:center;
	 /* width: 100%0%;  */
   
}
#nav2 {
    background: url(../images/bg2.png);
    background-attachment: fixed;
	position: relative;
	height: 130%0%;
	padding:80px;
	text-align:center;
    /*width: 100%0%;*/  
    
}
#nav3 {
    background: url(../images/bg3.png) ;
    background-attachment: fixed;
	position: relative;
	height: 130%0%;
	padding:80px;
	text-align:center;
  /* width: 100%0%;  */
}
#nav4 {
    background: url(../Images/bg4.png) ;
    background-attachment: fixed;
	position: relative;
	height: 130%0%;
	padding:80px 80px 0 80px ;
	text-align:center;	
   /*  width: 100%0%;  */

}
#nav {
    height: 70px;
    width: 100%; 
    position: fixed;
    top:5px;
    left:0;
    background: #00000; 
    z-index: 100;
    
}

a[id= "nav1"]:target ~ div.image {
    -webkit-transform: translateY( 0px);
    transform: translateY( 0px );
}

a[id= "nav2"]:target ~ div.image {
    -webkit-transform: translateY( -500px );
    transform: translateY( -500px );
}


/*#nav #logo {
    height: 50px;
    width: 50px;
    position: relative;
    top: 0;
    bottom:0;
    margin: auto 100px;
	text-align: left;
}*/

#nav #logo img {
    height: 100%;
    width: 100%;
    
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
	opacity: 0.6;
  filter:...

JavaScript

// create the back to top button
$('body').prepend('<a href="#" class="back-to-top">Back to Top</a>');

var amountScrolled = 300;

$(window).scroll(function() {
	if ( $(window).scrollTop() > amountScrolled ) {
		$('a.back-to-top').fadeIn('slow');
	} else {
		$('a.back-to-top').fadeOut('slow');
	}
});

$('a.back-to-top, a.simple-back-to-top').click(function() {
	$('html, body').animate({
		scrollTop: 0
	}, 700);
	return false;
});