JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.3.1-min.js"></script>
<div id="nav">
    <!--images cliquables-->
    <a href="#expli01" class="img-show">image01</a>
    <a href="#expli02" class="img-show">image02</a>
    <a href="#expli03" class="img-show">image03</a>
</div>
<a href="#nav" id="haut">^</a>

	<!--div cachées qui apparaissent lors du clic sur une image-->
<div id="expli01" class="txt-hidden">texte d'explication 1</div>
<div id="expli02" class="txt-hidden">texte d'explication 2</div>
<div id="expli03" class="txt-hidden">texte d'explication 3</div>

CSS

#nav::after {
    display: block;
    content:'';
    clear: left;
}
.img-show {
    display: block;
    margin-right: 30px;
    margin-bottom: 30px;
    float: left;
    width: 50px;
}
#haut {
    display: block;
    position: fixed;
    width: 20px;
    height: 20px;
    bottom: 10px;
    right: 10px;
    z-index: 10;
    text-decoration: none;
    line-height: 25px;
    text-align: center;
    background-color: #000;
    color: #fff;
}
.txt-hidden {
    display: none;
    height: 600px;
    margin-top: 100px;
}
.txt-hidden:first-child {
    margin-bottom: 0px;
}
#expli01 { background-color: #0f0; }
#expli02 { background-color: #f00; }
#expli03 { background-color: #00f; }

JavaScript

var ancre;

$('.img-show').click(function(e) {
    e.preventDefault()
    ancre = $(this).attr('href')
    $(ancre).slideDown(1000).siblings('.txt-hidden').slideUp(1000)
    
    setTimeout(function() {
        $.scrollTo( ancre, 800 )
    }, 1100)
});

$('#haut').click(function(e) {
    e.preventDefault()
    ancre = $(this).attr('href')
    $.scrollTo( ancre, 800 )
});