SCROLLTO

Le composant SCROLLTO permet, au clic sur l’élément, de faire défiler l’écran vers une ancre choisie.

Syntaxe

Comme tout déclencheur JS de SipaUI il est préfixé par data-su. À ce déclencheur on doit ajouter au moins un paramètre (to, cf. ci-dessous) afin d’indiquer la position vers laquelle défiler. Attention, la syntaxe impose l’imbrication de guillemets : 2 pour encadrer la valeur du data-suscrollto et d’autres pour encadrer les paramètres et leur valeur. Ces derniers doivent par ailleurs respecter la syntaxe JSON {"parametre":"valeur"}. Par conséquent, il faut choisir des '' pour encadrer le contenu de scrollto. Ce qui donne : data-suscrollto='{"paramètre":"valeur"}'.

Paramètres

• to : sélecteur vers lequel défiler (paramètre obligatoire). Attention, il est nécessaire que l’élément (ou le reste de la page sous l’élément) ait une hauteur suffisante. Exemple : data-suscrollto="{to:'#anId'}"
• what : pour pouvoir défiler, il faut un container qui défile. Par défaut, le composant fait défiler le body (l’écran). Avec le paramètre what, le composant fait défiler le container désigné si celui-ci peut scroller (height, overflow:scroll, …). Exemple : data-suscrollto="{to:'#anId',what:'#anOtherId'}"
• duration : booléen permettant d’activer ou non un défilement doux (smooth). Par défaut 0. Exemple : data-ofscrollto="{to:'#anId','duration':1}"
• delta : delta est soit une valeur fixe soit un sélecteur. Dans le cas d’une valeur fixe on soustrait simplement cette hauteur en pixel de la hauteur à défiler. Dans le cas du sélecteur on soustrait la somme des hauteurs des éléments désignés par le sélecteur. Exemple : data-suscrollto="{to:'#anId','delta':{'val':50}}" Exemple : data-suscrollto="{to:'#anId','delta':{'sel':'#toto, .titi'}}"

Exemples

Démo 0 : cas basique

Basiquement, le suscrollto fera défiler l’élément body (l’écran). Ici, il défile jusqu’au sommet de l’élément avec id="demo0", soit le parent du bouton, matérialisé par le fond gris et le cadre.

<style type="text/css">
    .scrollto-demo {
        border: 1px solid var(--gris-clair);
        height: 400px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
</style>
<div id="demo0" class="scrollto-demo">
    <p>Scrollez vers le bas, puis cliquez sur le bouton pour remonter.</p>
    <button class="su-button su-primary" data-suscrollto='{"to":"#demo0"}'>Cliquez pour remonter</button>
</div>

Démo 1 : cas de scroll dans un élément (attribut what)

Il est possible de réaliser un défilement dans un élément différent du body avec l’attribut what. Dans l’exemple ci-dessous, il s’agit du <div> qui contient 2 « zones » ; les boutons scrollent de la première à la seconde et vice-versa.

<style type="text/css">
    .scrollto-container {
        border: 1px solid;
    }
    .scrollto-container,
    .scrollto-depart,
    .scrollto-cible {
        height: 100px;
    }
    .scrollto-container {
        overflow-y: auto;
    }
    .scrollto-depart {
        background: lightgrey;
        padding: 20px;
    }
    .scrollto-cible {
        background: red;
        padding: 20px;
        color: #fff;
        margin-bottom: 300px;
    }
</style>
<div id="demo1">
    <button class="su-button su-primary su-margin-bottom-s" data-suscrollto='{"to":"#demo1-arrive", "what":"#demo1-container"}'>Vers l’arrivée</button>
    <button class="su-button su-secondary" data-suscrollto='{"to":"#demo1-depart", "what":"#demo1-container"}'>Vers le départ</button>
    <div id="demo1-container" class="scrollto-container">
        <div id="demo1-depart" class="scrollto-depart">
            <p>Départ</p>
        </div>
        <div id="demo1-arrive" class="scrollto-cible">
            <p>Arrivée</p>
        </div>
    </div>
</div>

Démo 2 : cas "smooth-scroll" : défilement doux avec l’attribut duration

Si vous souhaitez éviter un défilement abrupt, vous pouvez utiliser l’attribut duration. Les valeurs possibles sont 0 (désactivation) et 1 (défilement doux ou smooth).

Si vous ne souhaitez pas utiliser le JS SCROLLTO, vous pouvez simuler ce paramètre en utilisant scroll-behavior (cf. plus-haut).

<style>
.scrollto-demo {
    border: 1px solid var(--gris-clair);
    height: 400px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
</style>
<div id="demo2" class="scrollto-demo">
    <p>Scrollez vers le bas, puis cliquez sur le bouton pour remonter.</p>
    <button class="su-button su-primary" data-suscrollto='{"to":"#demo2", "duration":"1"}'>Cliquez</button>
</div>

Démo 3 : cas delta avec une valeur

Pour arriver à quelques pixels au-dessus de l’élément, vous pouvez utiliser l’attribut delta et utiliser une valeur en pixels. Cette valeur sera soustraite à la position de l’élément ciblé. Ainsi, dans l’exemple ci-dessous, on cible l’ID #demo3 (qui visuellement correspond à la position du bloc  « rendu ») auquel on soustrait 80px pour arriver au niveau du bloc d’exemple de code.

Si vous ne souhaitez pas utiliser le JS SCROLLTO, vous pouvez simuler ce paramètre en utilisant scroll-margin-top (cf. plus-haut).

<style type="text/css">
    #page {
        height: 200px;
        border: 1px solid var(--gris-clair);
    }
    #footer {
        height: 200px;
        border: 1px solid var(--gris-clair);
    }
</style>
<div id="demo3" class="scrollto-demo">
    <div id="page">
        <button class="su-button su-secondary su-margin-right-m" data-suscrollto='{"to":"#footer"}'>Cliquez pour défiler vers le footer</button>
        <button class="su-button su-primary" data-suscrollto='{"to":"#footer", "delta": {"val":"80"}}'>Cliquez pour défiler vers le footer -80px</button>
    </div>
    <div id="footer" class="scrollto-footer">Footer</div>
</div>

Démo 4 : cas delta avec un sélecteur

Vous pouvez aussi utiliser la hauteur d’un élément pour l’attribut delta. Ici, on scrolle jusqu’au bouton auquel on soustrait la hauteur du bloc « Delta ».

Pour tester, scroller pour descendre dans la page, puis cliquez sur le bouton pour remonter.

<style type="text/css">
    .scrollto-delta {
        width: 200px;
        height: 200px;
        border: 1px dashed black;
    }
    .scrollto-footer {
        height: 100vh;
    }
</style>
<div id="demo4-delta" class="scrollto-delta">Delta</div>
<button id="demo4" class="su-button su-primary" data-suscrollto='{"to":"#demo4", "delta": {"sel":"#demo4-delta"}}'>Cliquez pour défiler vers l’élément (-delta)</button>
<div class="scrollto-footer"></div>