JSFiddle - React, Tailwind, and code Playground

by Benahmed Taoufiq

HTML

<a href="id1" class='js-scrollTo'>ID1</a>
<a href="id2" class='js-scrollTo'>ID2</a>
<a href="id3" class='js-scrollTo'>ID3</a>
<div id="id1" class='destination'>
ID1
</div>
<div id="id2" class='destination'>
ID2
</div>
<div id="id3" class='destination'>
ID3
</div>

CSS

.js-scrollTo{position:absolute;
top:1200px}
.destination{height:200px;margin:50px 0px 50px 0px;
border:2px solid blue}

JavaScript

/* http://www.developpez.net/forums/d1597064/webmasters-developpement-web/javascript-ajax-typescript-dart/javascript/bibliotheques-frameworks/jquery/javascript-scroll/
*/
$(document).ready(function() {
var left=0,Hrefpage,speed=2000;
$(".js-scrollTo").each(function(){
	$(this).css({'left':left});
  left+=$(this).width()+20;
});
	$('.js-scrollTo').on('click', function() { // Au clic sur un élément
		 Hrefpage = $(this).attr("href"); // Page cible
		$("body").animate( { scrollTop: parseInt(
    $("#"+Hrefpage).offset().top
    -50
    ) }, speed ); // Go
		return false;
	});
});