JSFiddle - React, Tailwind, and code Playground

by Marco

HTML

<link rel="stylesheet" href="http://pepitodanger.free.fr/Maquette/css/owl.carousel.css">
<link rel="stylesheet" href="http://pepitodanger.free.fr/Maquette/css/layout.css">
<script src="http://pepitodanger.free.fr/Maquette/js/owl.carousel.js"></script>
<div id="page" class="snap-content layout">
    <section id="home">
        <div class="w960p">
            <header id="header">
                <img class="logo" src="http://pepitodanger.free.fr/Maquette/images/logo.png" alt="Logo">
                <img id="btn-clients" class="icon-client-area rollover" src="http://pepitodanger.free.fr/Maquette/images/client-area-normal.png" alt="Icon client area">
            </header>
            <div id="main">	<a href="#" id="open-left"><div id="div-home">
					<div id="div-home-content" class="center-middle">
						<h2 class="exemple-title">Div home by default</h2>
					</div>
				</div></a>	
                <div id="div-client-area">
                    <div id="div-client-area-content" class="center-middle">
                        	<h2 class="exemple-title">Div client area</h2>

                    </div>
                </div>
            </div>
            <footer id="footer">
                	<h2 class="div-footer">Footer</h2>

            </footer>
        </div>
    </section>
    <section id="content">
        <div id="background-01">
            <p class="bg">Background</p>
        </div>
        <article class="layout">
            <div class="w960p">
                	<h2 class="article-title">Title Rubric</h2>

                <hr class="blueline clear" />
                <div class="w70 center">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, quaerat, molestiae, omnis, repudiandae tenetur dicta enim inventore facilis culpa fugiat voluptas est quisquam aspernatur delectus numquam consequatur quam. Totam, repellendus?</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, asperiores,...

CSS

#page {
    white-space: nowrap;
}
#home {
    height: 700px;
    background: yellow;
    margin-top: 0;
    padding-top: 0;
}
.layout {
    height: 300px;
    background: green;
}
#content{
	position: relative;
	height: auto;
	width: 100%;
}
#content article{
	background-color: #069;
	float: left;
	height: 500px;
	width: 100%;
	position: relative;
	margin-bottom: 10px;
}

JavaScript

var  positions = []
  $('#content article').each(function(){
	   positions.push(parseInt($(this).offset().top));
	})
    console.log(positions)
	var count=-1
	var x=positions.length-1	
    $(window).keydown(function (event) {
        switch (event.keyCode) {
        case 38:
			if(count>=x*(-1)&&count!==0){	
				count--
				console.log(count)
				$('body,html').stop().animate({ scrollTop:positions[count]},2000 )
				}else{event.preventDefault()}

            break;
			
        case 40:
		    if(count<=x){
				count++
				console.log(count)
				$('body,html').stop().animate({ scrollTop:positions[count]},2000 )
				}else{event.preventDefault()}

            break;
        }
     });