Bonjour, j'ai créer un site web.

Ayant du contenu, les utilisateurs sont amenés à effectuer un scrolldown pour descendre dans la page.
J'ai mis en tout bas de page un bouton remonter qui fonctionne.
Cependant j'ai remarqué que sur certain site, il y a un effet scrollup quand on clique sur ce bouton. Or
mon bouton remonte d'un coup sans transition. Comment ajouté cet effet ?

Merci et bonne journée/soirée.

Bonjour,

J'ai trouvé un site où il explique comment faire mais il utilise jQuery !

Si ça vous intéressent voici la page expliquant comment faire.

Bonne soirée

-
Edité par Coles 31 juillet 2016 à 19:25:51

Merci beaucoup, je vais jeter un coup d'oeil. Bien que je ne sois pas du tout expérimenter en jQuery

Coles a écrit:

Bonjour,

J'ai trouvé un site où il explique comment faire mais il utilise jQuery !

Si ça vous intéressent voici la page expliquant comment faire.

Bonne soirée

-
Edité par Coles il y a 9 minutes

-
Edité par Nir0Z 31 juillet 2016 à 19:36:32

Hello, dans un premier temps, pour ne pas avoir à t'embêter avec du JQuery (même si ça reste relativement simple); tu peux tout simplement utiliser les ancres, tu n'auras pas d'effet de scroll, mais plus une "téléportation".

Pour ce faire, en haut de ta page tu mets ça :

<div id="top"></div>

Et pour le bouton:

<a href="#top">Remonter en Haut de la page</a>

http://www.alsacreations.com/astuce/lire/5-lien-precis-page-ancre-anchor-diese.html

Pepsy a écrit:

Hello, dans un premier temps, pour ne pas avoir à t'embêter avec du JQuery (même si ça reste relativement simple); tu peux tout simplement utiliser les ancres, tu n'auras pas d'effet de scroll, mais plus une "téléportation".

Pour ce faire, en haut de ta page tu mets ça :

<div id="top"></div>

Et pour le bouton:

<a href="#top">Remonter en Haut de la page</a>

http://www.alsacreations.com/astuce/lire/5-lien-precis-page-ancre-anchor-diese.html

Bonjour,

Je crois que justement, ce que Nir0Z souhaite, c'est bien d'avoir un effet de scroll up, et pas de non-transition brute et franche x)

Mais je ne saurais pas l'aider, je n'ai jamais appris à faire ça :/

Bonjour,

Il n'existe pas de solution viable sans JavaScript, mais comme dit plus haut, je recommandes l'utilisation du JQuery. Tu n'es même pas obligé de suivre le cours de ce site (mais certaines bases en CSS, JavaScript et JQuery sont un plus pour pouvoir implémenter cette solution dans un autre contexte).

Il faut que tu créé un bouton, l'objet que tu souhaite (une image, un input type="button", etc...). Pour le design, ce sera à toi de voir tout ça de ton côté.

Pour le côté pratique, il faut que tu ajoutes les librairies hébergées (je choisis Google, mais il en existe d'autre) avant la fin de ta balise fermante </body> :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Tout de suite après cette balise, tu ajoutes ton fichier javascript.js :

<script src="javascript.js"></script>

C'est dans ce fichier que tu travailleras ton animation.

Attention ! Il faut que le script JQuery soit inclu AVANT ton fichier javascript.js, sinon cela ne marchera pas. L'ordre est essentiel.

Maintenant tu ouvres ton fichier javascript.js et tu ajoutes ces lignes de code :

$(function(){
	$("#monBouton").click(function(){
    	$("html, body").animate({scrollTop: 0},"slow");
    });
});

Tu peux sauvegarder et fermer ton fichier javascript.js, on en aura plus besoin. Ouvres maintenant ton fichier-source HTML et ajoute un bouton à la fin de ton contenu. Je choisis un bouton pour la démonstration mais choisis ce qui te plaît :

<input type="button" value="remonter" id="monBouton" />

Le plus important, c'est de lui donner id="monBouton", sinon rien ne se passera.

Maintenant tu peux sauvegarder et voir le résultat.

Si besoin, tu peux voir la démonstration ici. 

AminNairi a écrit:

Bonjour,

Il n'existe pas de solution viable sans JavaScript, mais comme dit plus haut, je recommandes l'utilisation du JQuery. Tu n'es même pas obligé de suivre le cours de ce site (mais certaines bases en CSS, JavaScript et JQuery sont un plus pour pouvoir implémenter cette solution dans un autre contexte).

Il faut que tu créé un bouton, l'objet que tu souhaite (une image, un input type="button", etc...). Pour le design, ce sera à toi de voir tout ça de ton côté.

Pour le côté pratique, il faut que tu ajoutes les librairies hébergées (je choisis Google, mais il en existe d'autre) avant la fin de ta balise fermante </body> :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Tout de suite après cette balise, tu ajoutes ton fichier javascript.js :

<script src="javascript.js"></script>

C'est dans ce fichier que tu travailleras ton animation.

Attention ! Il faut que le script JQuery soit inclu AVANT ton fichier javascript.js, sinon cela ne marchera pas. L'ordre est essentiel.

Maintenant tu ouvres ton fichier javascript.js et tu ajoutes ces lignes de code :

$(function(){
	$("#monBouton").click(function(){
    	$("html, body").animate({scrollTop: 0},"slow");
    });
});

Tu peux sauvegarder et fermer ton fichier javascript.js, on en aura plus besoin. Ouvres maintenant ton fichier-source HTML et ajoute un bouton à la fin de ton contenu. Je choisis un bouton pour la démonstration mais choisis ce qui te plaît :

<input type="button" value="remonter" id="monBouton" />

Le plus important, c'est de lui donner id="monBouton", sinon rien ne se passera.

Maintenant tu peux sauvegarder et voir le résultat.

Si besoin, tu peux voir la démonstration ici. 

Wow merci ça fonctionne à merveille ! Merci infiniment de ton aide !

Franchement depuis le temps que je cherche merci!

Salut

ThibaudRobillard a écrit:

Franchement depuis le temps que je cherche merci!

Tu n'aurais pas dû faire ressortir ce sujet des tréfonds du forum. Mais puisque c'est fait, sache que cette solution en jQuery est dépassée depuis longtemps et que tu peux faire ça en une ligne de css : scroll-behavior - CSS : Feuilles de style en cascade | MDN (mozilla.org)

Je préviens la modération pour que le sujet soit locké.

-
Edité par EmmanuelBeziat 20 juin 2021 à 14:16:18

Bonjour,

maintenant JavaScript n'est plus nécessaire pour cet effet. Renseigne-toi sur scroll-behavior

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

(je ferme ce sujet, en revanche, inutile de le remonter encore)

(ah tiens, grillée par Emmanuel)

-
Edité par Lamecarlate 20 juin 2021 à 14:18:01