Créer un bouton retour en haut en jquery


Après avoir défilés une bonne dizaine d’articles, tous affichés dans son intégralité, c’est un peu long pour remonter en haut alors souvent on ferme l’onglet ou on clique sur le premier article venu et on retourne a l’accueil. Il y a plusieurs solutions pour remonter en haut grâce à un lien.

L’ancre

L’ancre est à utiliser dans une balise <a>. Celle-ci permet de repositionner sa page en haut grâce au lien  » retour en haut  » sans animation.

Tester ici : Retour en haut.

jquery

Après avoir fait une ancre avec un simple #, maintenant nous allons remonter en haut de notre page en ajoutant un effet. On va utilisé cette touche comme icône et on va le placer dans notre page en ajoutant un <div>
retour en haut

Ajouter ce code dans la partie <head>

En changeant la valeur de  » scroollTop  » on change le positionnement de la page et au lieu de la valeur  » slow  » on peut le remplacer par  » normal  » et  » fast « .

Ajouter ce code dans votre feuille de style :

Ajouter ce code dans votre page:

Retour en haut

Et voilà nous avons notre bouton  » retour en haut  » avec un jolie effet avec du JQUERY.

Plugin WordPress

Pour aller plus vite, je vous conseille le plugin  » Ultimate back to top  » en téléchargement gratuit sur Wordpres.org ou en ajoutant l’extension à partir de son site ou blog. Son point fort est la personnalisation des couleurs, des icônes le positionnement de l’ancre….
ultimate back to top