Comment ajouter des flèches haut et bas dans le forum ?

[admin tt]

Bonjour 

Comment puis-je ajouter une flèche haut et bas dans mon forum ?

[creange]

Bonjour admin tt 

il faut placer un java script dans les modules
avec le titre Bouton haut/bas 
Cocher sur toutes les pages 
et coller ce code 

Code:

$(function(){
          $("body").append('<div class="boutonhautbas"><a href="#top"><img src="ICI METTRE L ADRESSE
DE L IMAGE DU HAUT" alt="Aller en haut" /></a> <a href="#bottom"><img src="ICI METTRE L ADRESSE
DE L IMAGE DU BAS" alt="Aller en bas" /></a></div>');
});

Et ne pas oublier de valider 

ensuite il faut mettre ce code CSS dans la feuille de style dans le PA puis affichage et 
Couleur et feuilles de style CSS

Code:

$(function(){          $("body").append('<div class="boutonhautbas"><a href="#top"><img src="https://i.imgur.com/hkOmuCD.png" alt="Aller en haut" /></a> <a href="#bottom"><img src="https://i.imgur.com/G3Io37u.png" alt="Aller en bas" /></a></div>');});

et ne pas oublier d'enregistrer 

bonne soirée

[admin tt]

Merci beaucoup creange

C'est trop cool

Pouvez-vous ajouter une simple modification au code ?

J'aimerais que la navigation se fasse en plusieurs clics, pas en un seul,
Je veux que la flèche du haut me soulève un peu à chaque fois que je clique dessus


Est-il possible?

[creange]

je ne suis pas sûre que ce soit possible par le code 
mais peut être par un gif animé à la place du bouton ....
sauf que le gif se soulèvera tout le temps 
sinon ça va être trop compliqué et pas assez calée en code
pour te conseiller ....

[MlleAlys]

Bonjour,
(Les navigateurs ont normalement déjà une barre de défilement munie de tels boutons.)

Vous pouvez remplacer le code javascript de creange par le suivant (toujours sur toutes les pages) :

Code:

$(function(){
  $('body').append('<div id="updownbtn"><img onclick="window.scroll(0, window.scrollY - 100);" src="https://i.imgur.com/hkOmuCD.png" alt="Aller en haut" /> <img onclick="window.scroll(0, window.scrollY + 100);" src="https://i.imgur.com/G3Io37u.png" alt="Aller en bas" /></div>');
});

Pour modifier l'étendue du saut et monter ou descendre plus ou moins vite au clic, vous pouvez modifier les valeurs +100 et -100.

Attention, le code qu'a donné creange a mettre dans le css est en fait le même code javascript, et ne doit pas être mis dans un css. Le code css approprié sera plutôt :

Code:

#updownbtn {
  position: fixed;
  top: 50%;
  right: 0;
}
#updownbtn img {
  display: block;
  cursor: pointer;
  margin: 5px;
}

[creange]

bonsoir Mlle Alys Effectivement  je viens de me rendre compte que j'avais mis le 
même code 2 fois 
merci d'avoir rectifié

[admin tt]

Merci beaucoup MlleAlys
C'est très cool et fonctionne parfaitement

je ñ'ai qu'une seule demande

Est-il possible d'ajouter deux flèches à droite et à gauche ?

https://i.servimg.com/u/f46/19/54/28/34/ocia_a10.png

[MlleAlys]

javascript à remplacer :

Code:

$(function(){
  $('body').append('<div id="updownbtn"><img onclick="defile(0,-1)" src="https://i.imgur.com/hkOmuCD.png" alt="Monter" /><br/><img onclick="defile(-1,0)" src="https://i.imgur.com/hkOmuCD.png" alt="Gauche" style="rotate: -90deg;"/><img onclick="defile(1,0)" src="https://i.imgur.com/hkOmuCD.png" alt="Droite" style="rotate: 90deg;"/><br/><img onclick="defile(0,1)" src="https://i.imgur.com/G3Io37u.png" alt="Descendre" /></div>');
});

function defile(x,y) {
  x = x*100;
  y = y*100;
  window.scrollBy(x,y);
}

J'ai mis les mêmes images pivotées et dans le même bloc que les précédents boutons.
Pour un peu de mise en forme et aligner les boutons, le css peut être complété ainsi avec "text-align: center;" :

Code:

#updownbtn {
  position: fixed;
  top: 50%;
  right: 0;
  text-align: center;
}
#updownbtn img {
  cursor: pointer;
  margin: 5px;
}

Vous pouvez changer la taille du "bond" du défilement en changeant les valeurs 100 ligne 6 et 7 du javascript (x : horizontal, y : vertical).

[admin tt]

Merci  Merci beaucoup MlleAlys      

C'est très cool et fonctionne parfaitement




Merci MlleAlys   et creange