Comment autoriser les utilisateurs à faire défiler la page jusqu’au bloc spécifié
Comment ça marche
Si vous souhaitez attirer l’attention des utilisateurs sur un bloc particulier de votre site, vous pouvez configurer le défilement automatique vers ce bloc au moyen d’un code HTML personnalisé. Pour ce faire, utilisez une solution existante ou ajoutez votre propre code.
Comment configurer
Utiliser une solution existante
- Ouvrez votre projet dans le Compte éditeur.
- Dans la barre latérale, cliquez sur Site Builder.
- Cliquez sur Open Site Builder.
- Ajoutez le composant Button au bloc où le défilement doit commencer. Modifiez le texte de votre bouton.
- Définissez le type de composant Link et insérez n'importe quel lien dans le champ.
- Insérez le code suivant dans le bloc Custom code :
Copy
- html
<script>
(function() {
var scrollBlock = '.block--header';
var scrollBlockNumber = 0;
var scrollButtonNumber = 0;
var scrollToBlockName = '.block--packs';
var scrollToBlockNumber = 0;
var button = document.querySelectorAll(scrollBlock)[scrollBlockNumber].querySelectorAll('.ui-site-calltoaction--link')[scrollButtonNumber];
button.href = 'javascript:void(0)';
button.addEventListener('click', function () {
var scrollTo = document.querySelectorAll(scrollToBlockName)[scrollToBlockNumber];
scrollTo.scrollIntoView({ behavior: 'smooth' });
});
})();
</script>
- Modifiez les paramètres suivants :
scrollBlock
— nom de la classe CSS du bloc qui contient le bouton de défilement. Les options possibles sont :- .block--header (bloc Header) ;
- .block--hero (bloc Call-to-action) ;
- .block--packs (bloc Packs).
scrollBlockNumber
— numéro de séquence du bloc contenant le bouton de défilement. La valeur minimale est0
.scrollButtonNumber
— numéro de séquence du bouton de défilement. La valeur minimale est0
.scrollToBlockName
— nom de la classe CSS du bloc vers lequel faire défiler la page. Les options possibles sont :- .block--header (bloc Header) ;
- .block--hero (bloc Call-to-action) ;
- .block--html (bloc Custom code) ;
- .block--packs (bloc Packs) ;
- .block--description (bloc Description) ;
- .block--gallery (bloc Gallery) ;
- .block--requirements (bloc System requirements) ;
- .block--faq (bloc FAQs) ;
- .block--embed (bloc Social media widgets) ;
- .block--news (bloc News) ;
- .block--footer (bloc Footer).
scrollToBlockNumber
— numéro de séquence du bloc vers lequel faire défiler la page. La valeur minimale est0
.
- Cliquez sur Preview pour voir vos modifications.
Regardez le tutoriel vidéo pour ces instructions :
Ajouter votre propre code
- Dans le constructeur, cliquez sur Add block et sélectionnez Custom code.
- Insérez votre propre code dans le bloc.
Cet article vous a été utile ?
Merci pour votre commentaire !
Nous examinerons votre message et l'utiliserons pour améliorer votre expérience.Liens utiles
Dernière mise à jour: 22 Janvier 2024Faute de frappe ou autre erreur dans le texte ? Sélectionnez le texte concerné et appuyez sur Ctrl+Entée.