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
43m44
de formation
13
leçons vidéo
4
chapitres
Débutant
niveau requis
Carl Brison
Carl Brison
Formateur certifié

Dev. FrontEnd #10 : Bouton de scroll top

4.7/5 Trustpilot (1395 avis) Satisfait ou remboursé
43m44
de formation
13
leçons vidéo
4
chapitres

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

Table des matières

Chapitre 1 : Mise en place d'une icône

08m15
 
Leçon 1Installation d'awesome
Leçon 2Mise en place de l'icône
Leçon 3Conclusion

Chapitre 2 : Version sans programmation

14m01
 
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

19m42
 
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

01m46
 
Leçon 1Conclusion

Avis des apprenants

Détail des avis
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
5
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
5
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
5
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

Quel est le niveau requis pour suivre ce tuto ?

débutant

Que contient le fichier source ?

Les différents codes sources du tuto.
Choisissez votre accès

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
11,99€
Paiement unique, sans abonnement
Accès à vie à cette formation
43m44 de vidéo • 4 chapitres
Satisfait ou remboursé voir conditions
Accès immédiat après paiement
Avec l'abonnement
Pour progresser en continu
34,90€ 27,91€ /mois
Le 1er mois, puis 34,90€ - sans engagement
Cette formation + 6 788 autres en illimité
Plus de 20 nouvelles formations par mois
Résiliable en 1 clic, à tout moment
Profiter de l'offre
Accès immédiat, pendant votre abonnement

Inclus dans les deux formules

  • Hors connexion via l'app Tuto.com
  • Salon d'entraide pour vos questions
  • Certificat de complétion
Paiement sécurisé 1,4 million d'apprenants 4.7/5 Trustpilot
Logo carte-bancaire-monoLogo visa-monoLogo mastercardLogo paypal-monoLogo klarna-monoLogo apple-pay-monoLogo google-pay-mono
Une question avant de choisir ? Écrivez-nous ou appelez le 01 84 80 80 29 (du lundi au vendredi, 10h-12h et 14h-16h)
Continuez votre progression

Formations complémentaires

Les apprenants qui suivent cette formation s'intéressent aussi à :

+ 1,400,000 d’apprenants et d’entreprises se forment au quotidien sur Tuto.com
  • Logo adobe
  • Logo etapes
  • Logo nikon
  • Logo arte
  • Logo xp-pen
  • Logo citia
  • Logo universal
  • Logo jc-decaux
  • Logo cite-science
  • Logo credit-agricole
  • Logo om
  • Logo fff
Paiement 100% sécurisé

Vos données sont chiffrées et protégées pendant toute la transaction.

  • visa-mono
  • mastercard-alt
  • maestro-alt
  • paypal-mono
  • klarna-mono
  • apple-pay-mono
  • google-pay-mono
Besoin d’aide ?

Notre équipe répond à vos questions du lundi au vendredi de 10h à 12h et de 14h à 16h.
Support par e-mail ou par téléphone au 01 84 80 80 29.

Abonnement 34,90€/mois

Attendez ! 🤗

Accédez à plus de 1426 tutos gratuits

Notre politique de protection des données