Bonjour,

J'ai mis en place un lien back to top sur mon site qui est tout le temps visible. Cependant, je souhaiterais qu'il apparaisse seulement lorsqu'on commence à scroller la page. En cherchant un peu, j'ai trouvé ce tuto qui date: https://www.creativejuiz.fr/blog/tutoriels/realiser-un-lien-top-qui-apparait-au-scroll-de-la-page-avec-jquery

Malgré tout, je n'ai pas réussi à réaliser l'effet que je voulais. Pouvez-vous m'aider ?

Cordialement

-
Edité par .Little Lady 9 avril 2018 à 15:42:16

Raphaël Bretzner

9 avril 2018 à 16:06:39

Salut,

Tu peux faire ceci en jQuery :

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

Ou en pure HTML par un système d'id (comme les sites onepage) :

<div id="jump_to_me">
    blah blah blah
</div>

<a target="#jump_to_me">Click Here To Destroy The World!</a>

Raphaël

.Little Lady

9 avril 2018 à 16:13:12

Salut,

Je ne comprends pas très bien ton code jQuery. Peux-tu développer ?

Quant au code HTML c'est le principe de base que j'utilise pour faire mon lien. En gros, j'ai mis l'id top à une div que j'ai placé au début du <body> et j'ai ensuite le lien plus loin.

Raphaël Bretzner

9 avril 2018 à 16:18:41

c'est le même principe que le système onepage en html.

En gros tu as un lien, <a href="....." ....>Revenir en haut</a> par exemple, avec la ligne suivante

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

tu crées une animation pour faire un effet de remonté, jusqu'à la position 0 (0 en ordonnée) avec une vitesse de défilement "slow"

Je te conseille de regarder la doc sur animate

Raphaël

.Little Lady

9 avril 2018 à 16:36:43

Salut,

En lisant ta réponse, je me dis que je n'ai peut-être pas bien expliqué mon problème.

Je ne cherche pas à faire un effet de remonté avec une vitesse de défilement "slow". Ce que je cherche à faire c'est que tant qu'on est sur le haut de la page, le lien "Top" reste caché et qu'il n'apparaisse que lorsque j'ai commencé à faire défiler la page, comme sur ce site: https://wpformation.com/wordpress-http-https/

EDIT: J'ai fini par trouver la solution à mon problème.

Merci à Raphaël Bretzner pour avoir essayer de m'aider.

-
Edité par .Little Lady 10 avril 2018 à 10:12:14

BoulayeDIALLO1

16 novembre 2018 à 18:49:24

Bonjour j'ai fait un scroll "top" avec jquery j'ai tout mis en place mais ça ne marche pas

Lamecarlate

16 novembre 2018 à 20:00:21

Bonjour,

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"

soit de créer un nouveau sujet décrivant votre propre contexte

ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. Me contacter par MP si besoin.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Forums des Zéros

Lien « top » qui apparaît au scroll de la page

Déterrage

Lien « top » qui apparaît au scroll de la page

Déterrage

Supprimer

Modérer

Signaler le message aux modérateurs