JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
  <div id="menu">
    <ul>
      <li> <a href="#slide1">slide1</a> </li>
      <li> <a href="#slide2">slide2</a> </li>
    </ul>
  </div><!--fin menu--> 
</div><!--fin header-->
<div id="content">
	<div id="bloc"></div>
	<div id="slide1">
    </div>
    <div id="slide2">
    </div>
</div>

CSS

body{
	margin:0;
}
#header {
	background-color:#F9C;
	width: 100%;
	height: 180px;
	margin: auto;
	padding: 10px;
	overflow: hidden;
	position: fixed;
	border-bottom: 1px;
	border-bottom-color: #3d4d4c;
	border-bottom-style: solid;
	border-bottom-width: 1px;
}
#bloc{height:201px;}
#slide1{
	background-image:url(http://mercade.fr/TEST/img/slide1.jpg);
	width:100%;
	height:1182px;
}
#slide2{
	background-image:url(http://mercade.fr/TEST/img/slide2.jpg);
	width:100%;
	height:1182px;
}

JavaScript

$('#menu a').click( function() {
		var page = $(this).attr('href'); 
		var speed = 750; // gérer la vitesse de défliement
        
        // Ici on retranche la hauteur du bandeau (201px dans ta feuille de styles)
		$('html, body').animate( { scrollTop: $(page).offset().top - 201 }, speed );
		return false;
	});