[TOUTES VERSIONS] Afficher des boutons pour le haut et le bas de page

Fondateur

Hello les ami(e)s,

l'astuce consiste à afficher deux boutons:
un pour le haut de page et un autre pour le bas de page et ce sur toutes les pages de votre forum,
jusque là rien de bien extraordinaire.
Le petit plus est que ces boutons s'estomperont au scroll en fonction de la navigation ( vers le haut ou vers le bas).

Vous pourrez modifier les images en modifiant leurs liens (entre les guillemets) déjà présents dans le script (au début):

Code:: //LE LIEN DE L IMAGE POUR REMONTER
var M14_H="https://i.servimg.com/u/f20/20/11/87/27/up_arr10.png";
//LE LIEN DE L IMAGE POUR DESCENDRE
var M14_B="https://i.servimg.com/u/f20/20/11/87/27/down_a10.png";

D'autres images sont disponibles en bas de l'astuce:
 Cliquez ici pour les visionner:

Attention, ces images ont les dimensions suivantes: 32px par 32px
Pensez à adapter le css clin oeil

.

En visuel:

[TOUTES VERSIONS] Afficher des boutons pour le haut et le bas de page Up_arr10

[TOUTES VERSIONS] Afficher des boutons pour le haut et le bas de page Down_a10

Modules/HTML JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript
Mettre un titre explicite.
Cocher sur toutes les pages.

Déposez ce script:

Code:: $(document).ready(function(){
   //LE LIEN DE L IMAGE POUR REMONTER
   var M14_H="https://i.servimg.com/u/f20/20/11/87/27/up_arr10.png";
   //LE LIEN DE L IMAGE POUR DESCENDRE
   var M14_B="https://i.servimg.com/u/f20/20/11/87/27/down_a10.png";
   //ON IMPORTE LES BOUTONS
   $('body').append('<a href="#top" class="M14_ToP"title="Haut de page"><img src="'+M14_H+'"/></a><a href="#bottom" class="M14_BoTTom"title="Bas de page"><img src="'+M14_B+'"/></a>');

   $(window).scroll(function(){
   if ($(this).scrollTop() > 200) {
   $('.M14_ToP').fadeIn();
   $('.M14_BoTTom').fadeOut();
   } else {
   $('.M14_ToP').fadeOut();
   $('.M14_BoTTom').fadeIn();
   }
   });
   $('.M14_ToP').click(function(){
   $('html ,body').animate({scrollTop : 0},1000);
   return false;});
   $('.M14_BoTTom').click(function(e){
   $("html, body").animate({ scrollTop: $(document).height() }, 1000);
   return false;});
   });

Pensez a cliquer sur le bouton Valid

Si vous désirez que le bouton s'affiche plus tôt ou plus tard il suffit de modifier le script dans cette partie:

Code:: if ($(this).scrollTop() > 200)

Diminuez ou augmentez le "200" selon votre souhait.

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Déposez ceci et déposez les boutons ou vous le souhaitez en modifiant les valeurs 200px tout en restant raisonnable.
Les liens des images étant déjà dans le script, il faut penser que ces dernières ont les dimensions suivantes:

32px par 32px

Code:: /*ON POSITIONNE LES DEUX BOUTONS*/

a.M14_ToP, a.M14_BoTTom
{
width: 32px;
height: 32px;
position: fixed;
right: 20px;
z-index: 999;
}
/*LE BUTON VERS LE HAUT*/
a.M14_ToP
{
bottom:200px;
display: none;

}
/*LE BOUTON VERS LE BAS*/
a.M14_BoTTom
{
top:200px;
}