Ajouter une icône "retour en haut" (back to top)

Publié le 17 novembre 2019 par IMA

Dans les thèmes que vous utilisiez avant de tout quitter pour Oxygen, il y avait "juste" une case à cocher ou une option à activer pour ajouter une petite icône "retour en haut" dans vos pages lorsqu'elles dépassaient une certaine longueur.

Vous aimeriez bien en faire autant avec Oxygen mais vous n'êtes pas un développeur. Barry Smith, membre du groupe officiel Oxygen en anglais, vous explique comment faire :

  1. Modifiez votre template principal
  2. Placez l'icône de votre choix n'importe où dans le footer
  3. Ajoutez un link wrapper à cette icône et envoyez-le sur l'ID de l'élément tout en haut de votre page.. Dans le cas de Barry, c'était "_header_row-3-6" alors il a mis comme lien : "#_header_row-3-6". Notez que #top fonctionne aussi (NdT)
  4. Si vous voulez une transition plus douce, allez dans STRUCTURE - MANAGE - SETTINGS - Scripts - Smooth scroll to Hash Links - Ajoutez par exemple 1000ms
  5. Maintenant on va paramétrer l'icône "Back to Top"
  6. Sélectionnez le Link Wrapper qui comprend l'icône
  7. Advanced - Layout
    7a. Z-Index: 100
    7b. Position: Fixed, 20px Right, 20px Bottom (vous pouvez ajuster en fonction de la hauteur de votre footer pour que ça ressorte bien)
  8. Advanced - Effects - Animate on Scroll -
    8a. Animation Type: Fade Left
    8b. Animate Duration: 500ms
    8c. Animation Trigger Offset: 150px

Et voilà, enregistrez et testez. L'icône que vous avez choisie devrait apparaître sur l'écran après un scroll de 150px.

Il ne vous reste plus qu'à configurer l'icône (taille, couleur etc.) pour l'assortir au reste de votre design.

Merci Barry !

Commentaire(s) :

  1. Merci pour ce tuto... !!
    Finalement c'est tout simple de faire des trucs qui paraissent compliqué 😉
    Par contre quand je met #top, ça remonte bien tout en haut mais ça ne prend pas la transition douce... il n'y a que moi qui ait ce phénomène ou pas ?

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

bookmarkelementum sit Aenean lectus ante. ut consequat. justo dolor linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram