I need to create a horizontal website where each section takes up the entire screen. I have added anchors to navigate between sections using links, but I am struggling to make a JavaScript code work for smooth horizontal scrolling.
Here is my HTML:
<body>
<header class="section black">
<a href="#mission">SCHOOL MISSION</a>
<div class="logo"></div>
</header>
<section class="section gray" id="mission">
<p>
Second section
</p>
</section>
</body>
And here is my CSS:
* {
margin: 0;
}
body {
width: 2000px;
position: absolute;
top:0px;
left:0px;
bottom:0px;
}
.section {
margin: 0px;
bottom: 0px;
width: 100vw;
float: left;
height: 100vh;
}
.black {
background-color: #000000;
}
.gray {
background-color: #838B8B;
}
Check out an example here: https://jsfiddle.net/mnn94crj/10/