JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
			
		<div class="landing">
		
		
		
		
		
		
		
		
		</div>
		<div class="surroundContainer">
			<div class="hPage">
			
			
			
				<button id="scrollTo"> Scroll to View 2 </button>
			
			
			
			
			
			
			
			
			</div>
			<div class="hPage" id="page2">View 2</div>
		</div>
	
	
	</div>

CSS

* { 
	margin: 0;

}

html, body { 

height:100%;
	
}

.wrapper { 

	height: 100%;
	background-color: gray;
	overflow: auto;

}

.landing {
	
	height: 100%;
	background-color: gray;

}

.hPage { 

	height: 100%;
	width: 100%;
	background-color: gray;
	display: inline-block;
	white-space: nowrap;
	position: static;

	
	
}

.surroundContainer { 

	height: 100%;
	width: 100%;
	white-space: nowrap;
	
}

JavaScript

$("#scrollTo").click(function() {
    $('.wrapper').animate({
        scrollLeft: $("#page2").offset().left
    }, 2000);
});