Dev. FrontEnd #10 : Bouton de scroll top
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

TUTO Dev. FrontEnd #10 : Bouton de scroll top

Carl Brison
Promo -33% Jusqu'au 23 juillet, 23:59
8,00€12,00€
Acheter maintenant, payer plus tard. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Dans ce nouvel atelier pratique en vidéo dédié au développement FrontEnd, nous allons voir ensemble comment mettre en place un lien qui permet à l'internaute de pouvoir remonter tout en haut de la page de votre site.

Pour cela, nous installerons un lien visible en bas à droite de l'écran, et lorsque l'internaute cliquera alors sur ce lien, il se retrouvera en haut de la fenêtre. Je vous propose d'étudier 2 méthodes pour arriver au résultat :

  • en utilisant uniquement le HTML ainsi que le CSS.
  • en programmant en jQuery.

Si vous ne connaissez pas jQuery, vous avez à votre disposition une formation sur les bases du langage jQuery
Je mets à votre disposition l'ensemble des codes utilisés de cet exercice.
Un petit QCM vous permettra de valider vos connaissances. 

Bon tuto !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Mise en place d'une icône
Chapitre 2
Version sans programmation
Chapitre 3
Version avec programmation jQuery
Chapitre 4
Conclusion

Plan détaillé du cours

Chapitre 1 : Mise en place d'une icône
08m15s
 
Leçon 1Installation d'awesome
Leçon 2Mise en place de l'icône
Leçon 3Conclusion
Chapitre 2 : Version sans programmation
14m01s
 
Leçon 1Ecriture du code HTML
Leçon 2Ecriture du code CSS
Leçon 3Codage de l'icone
Leçon 4Ralentir la remontée
Chapitre 3 : Version avec programmation jQuery
19m42s
 
Leçon 1Installation de la librairie jQuery
Leçon 2Retour au CSS
Leçon 3Ecriture du code jQuery 1/2
Leçon 4Ecriture du code jQuery 2/2
Leçon 5Améliorations
Chapitre 4 : Conclusion
01m46s
 
Leçon 1Conclusion

Avis des apprenants

Détail des avis
79
Apprenants
7
Commentaires
5/5
Note moyenne
5/5
7
4/5
0
3/5
0
2/5
0
1/5
0
Alain Tardif
Alain Tardif
Publié le 27/09/2023
Merci Carl pour ce cours, si le scroll-behavior : smooth ; ne fonctionnait pas sur EDGE en 08/2019, depuis 01/2020 cela fonctionne bien selon le site Can I Use. Très intéressant l'utilisation de la propriété visibility : hidden. L'utilisation de JQuery est toujours aussi agréable pour moi. Validé 100 % Dev-FrontEnd#10
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil, Alain ;-)
Dehousse Marcel
Dehousse Marcel
Publié le 11/04/2021
Merci pour le tuto, très clair, comme je regarde presque exclusivement vos tutos, je suis pas dépayser.
Carl Brison
Carl Brison
Ca c'est vraiment très gentil ! Merci beaucoup pour votre confiance ;-)
Pierre Girard
Pierre Girard
Publié le 17/08/2020
Très instructif et très clair. J'ai un peu modifié la partie jquery pour que cela fonctionne pour le scroll d'une div et pas sur la page entière; ça maaaaarche! Merci Carl ! À quand le tuto n°11 sur le Front-End ?
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire ;-) Bravo pour votre modif ! La suite est pour bientôt ;-) Merci pour votre fidélité

Vos questions sur le cours

Avec quelles versions de logiciels ce tuto est-il compatible ?

jQuery , CSS 3

Quel est le niveau requis pour suivre ce tuto ?

débutant

Que contient le fichier source ?

Les différents codes sources du tuto.

Payer plus tard

Prix d'achat : 8,00 €
Pour payer plus tard, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez dans 30 jours

Klarna : conditions d'utilisation du paiement différé.

Attendez ! 🤗

Accédez à plus de 1387 tutos gratuits

Notre politique de protection des données