JSFiddle - React, Tailwind, and code Playground

HTML

<body>

    <div id="title" class="slide header">
        <h1 id="weboon">web<span>OO</span>n</h1>

        <nav>
            <ul class="circular">
                <li><a id="link_discover" href="#Présentation">Nous découvrir</a></li>
                <li><a id="link_contact" href="#Contact">Contact</a></li>
            </ul>
        </nav>
    </div>

    <div id="Présentation" class="inter-slide">
      	<div class="title">
        	<h1>Vivamus a nisi id erat sollicitudin blandit. </h1>
        	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae ex et tortor tincidunt facilisis ac quis eros.</p>
        </div>
    </div>

    <div id="slide2" class="slide">
        <div class="title right">
            <h1>in tempus </h1>
            <p>in tempus justo. Duis eget lectus aliquet elit gravida sodales eget quis orci. In hac habitasse platea dictumst. Phasellus ac diam ac quam luctus dignissim</p>
        </div>
    </div>

    <div id="slide3" class="slide">
        <div class="title left">
            <h1>Accessible !</h1>
            <p>
                Sensible aux règles SEO, webOOn s'efforce de vous offrir le meilleur <strong>positionnement</strong> possible en terme de référencement sur les moteurs de recherche.
            </p>
        </div> 
    </div>

    <div id="slide4" class="inter-slide">
        <div class="title">
            <h1>Mauris a arcu !</h1>
            <h2>&rarr; Fiablilité</h2>
            <p>Duis commodo ligula a augue placerat, lacinia faucibus metus tempus. Donec molestie lobortis justo nec convallis. Suspendisse ac bibendum orci, nec fermentum est. Proin ante enim, pulvinar ac hendrerit at, luctus et justo. Nulla fermentum rhoncus porttitor. Etiam lobortis elit eu leo tempus auctor</p>
        </div>
    </div>

    <div id="slide5" class="slide">
        <div class="title right">
            <h1> In hac habitasse</h1>
            <p>Phasellus at felis ac dolor fringilla consequat. Praesent placerat, diam eu...

CSS

@import "compass";

$primary: #3786bd;
$dark_primary: darken($primary, 15%);
$fonts_folder: "../fonts/";
$line_height: 1.5em;
/* form */
$infoColor:         #66AFE9;
$validColor:        #0D9A0A;
$invalidColor:      #C7101A;

/*********************************************************
        Mixins
*********************************************************/
@mixin border-effect($color) {
 padding: 6px 12px;
    border: 1px solid #ccc;
    @include border-radius(4px);
    outline: 0;
    font-size: 1em;
    color: #555;
  border: 1px solid $color;
  @include box-shadow(0 0 8px $color, 0 0 0 $color !important);
}


/*********************************************************
        MY STANDARD CSS
            - Reset CSS
            - GrafikArt's Typography
            - Some elements of "Bootstrap Twitter"
            - All mixed, and modified by me
*********************************************************/
* { @include box-sizing(border-box); }

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, button {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body {
    font-family: Verdana, Helvetica, sans-serif;
    position: relative;
    height: 100%;
    width: 100%;
    z-index: 1;
}
ul { list-style: circle inside; overflow:hidden; }
ol { list-style: decimal; overflow:hidden; }
ul ul, ol ul { list-style: disc inside;          ...

JavaScript

$('a[href^="#"]').on('click', function(e) {

	var itself = $( this );
	var duration;

	if (itself.html() == 'Nous découvrir') 	{ duration = 1000; }
	else 									{ duration = 2000; }

    var target = $( itself.attr('href') );

    e.preventDefault(); // can't use "prevenDefault()" because Chrome and Opera don't understand scroll()
    
    $(' body ').animate({
        scrollTop: target.offset().top
    }, duration);

});