JSFiddle - React, Tailwind, and code Playground

HTML

<a name="debut"></a>
<div id="bandeau" class="largeur">
    <h1 class="titreh1">Titre du Site</h1>
    <h2 class="titreh2">Titre section</h2>
        <div id="hornav">
        <p>Menu Menu Menu Menu Menu Menu Menu Menu</p>
        </div>
    <h2 class="titrepage">Titre de la page</h2>
</div><!-- fin du bandeau -->
<div id="page">
<div id="contenu">
    <div class="matiere">
        <ul>
            <li><a class="ancre" href="#syn1">Article 1</a></li>
            <li><a class="ancre" href="#syn2">Article 2</a></li>
            <li><a class="ancre" href="#syn3">Article 3</a></li>
        </ul>
    </div>    
<a name="syn1"></a><h2>Article 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla....

CSS

body 	            { width:960px; margin:0 auto; }
#bandeau 		    { position:absolute; left:0; top:0; right:0; 
                      width:960px; height:205px; margin:0 auto;
                      text-align:center; z-index:10; background-color:#F60; }
html>body #bandeau  { position:fixed; } 
#hornav 		    { position:absolute; left:0; top:122px; width:960px; height:35px; padding:0; background-color:#FF3; text-align:center; }				  
#page               { width:auto; height:auto; min-height:600px; padding-top:210px; padding-bottom:50px; color:#000058;
                      border: 1px solid orange; }
#contenu            { width:800px; height:auto; margin:0 auto 10px auto; padding:10px; z-index:1; 
                      border: 1px solid blue; }
.matiere			{ width:450px; height:auto; margin:30px auto; padding:5px;
					  font-style:italic; color: #009; background-color:#6F9;}
.matiere li 		{ color: #001abd; }
.matiere li a	    { text-decoration:none; }
.matiere li a:hover { color:#ff0000; white-space:nowrap; text-decoration:underline; }
.titreh1            { width:620px; margin:0 auto; padding-top:0px; } 
.titreh2            { width:620px; margin:0 auto; padding-top:8px; } 
.titrepage 		    { position:absolute; top:160px; left:150px; width:620px; height:45px;
					  margin:0 auto; padding:0; }

JavaScript

$(".ancre").click(function(){
	var hrefValue = $(this).attr("href").replace('#','');
    var position = $("a[name="+hrefValue+"]").position();
    $('html, body').animate({  
        scrollTop:position.top-200
    }, 'slow');
});