JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<span id="toTop"><i class="fa fa-angle-up" aria-hidden="true"></i></span>
<div class="con">
    <section id="b2">
        <!-- Entrées -->
        <h3 class="fade">ENTRÉES</h3><br>
        <article class="plats">
            <div class="left">
                <p class="fade">MILLEFEUILLE BUFFALA</p><br>
                <p class="fade">ASSIETTE DE LÉGUMES GRILLÉS<br>
                    <em>fleur de sel de Guérande et huile d’olive d’Italie</em></p><br>
                <p class="fade">SALADE DE CALAMARS<br>
                    <em>calamar, rucola, tomates</em></p><br>
                <p class="fade">SALADE DE POULPE</p><br>
            </div>
            <div class="right">
                <p class="fade">ANTIPASTO CASA NOSTRA<br>
                    <em>foccaccia, burrata, petits légumes grillés, Vitello Tonnato, etc</em></p><br>
                <p class="fade">CARPACCIO DE BOEUF<br>
                    <em>rucola, grana padano, champignons</em></p><br>
                <p class="fade">BRESAOLA, RUCOLA ET GRANA PADANO</p><br>
                <p class="fade">RUCOLA PARMESAN</p><br>
            </div>
        </article>
    </section>

    <section id="b3">
        <!-- Pâtes -->
        <h3 class="fade">PASTA</h3><br>
        <article class="plats">
            <div class="left">
                <h4>LINGUINE</h4><br>
                <p class="fade">ALLO SCOGLIO<br>
                    <em>fruits de mer, tomates</em></p><br>
                <p class="fade">ALLE VONGOLE VERACE<br>
                    <em>vongoles, persil, ail, huile d’olive</em></p><br>
                <h4>PENNE</h4><br>
                <p class="fade">ALLA SICILLIANA<br>
                    <em>tomates, aubergines, olives noires, mozzarella</em></p><br>
                <p class="fade">ALL’ARRABIATA<br>
                    <em>tomates, piment, ail</em></p><br>
            </div>
        ...

SCSS

span#toTop {
    position: fixed;
    z-index: 10;
    left: 2.1em;
    bottom: 5em;
    .fa.fa-angle-up {
        font-size: 6em;
        color: #f00;
        transition: .1s all 0s;
        &:hover {
            cursor: pointer;
        }
        &:active {
            transform: scale(1.2)
        }
    }
}

section {
    text-align: center;
    background-color: lightgrey;
    margin: .25em auto;
    padding: .25em;
    width: 1000px;
}

JavaScript

// scrollTo(c,e,d)
// c = element to scroll to or top position in pixels
// e = duration of the scroll in ms, time scrolling
// d = (optative) ease function. 

document.getElementById('toTop').onclick = function() {
	scrollTo(0, 2500, easeInOutQuart);
}

function scrollTo(c,e,d){d||(d=easeInOutQuart);var a=document.documentElement;if(0===a.scrollTop){var b=a.scrollTop;++a.scrollTop;a=b+1===a.scrollTop--?a:document.body}b=a.scrollTop;0>=e||("object"===typeof b&&(b=b.offsetTop),"object"===typeof c&&(c=c.offsetTop),function(a,b,c,f,d,e,h){function g(){0>f||1<f||0>=d?a.scrollTop=c:(a.scrollTop=b-(b-c)*h(f),f+=d*e,setTimeout(g,e))}g()}(a,b,c,0,1/e,20,d))};
function easeInOutQuart(t) {
	return t < .5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t
}