[AWESOMEBB] Bouton pour descendre la page

Coucou Alex,

je vais te donner celui présent sur ce forum en reprenant les images de ton forum.






Ces images ont ces dimensions:35px par 35px;

Il faudra donc reprendre les dimensions en cas ou tu désirerais les changer dans la feuille de style ici:

Code:

/*ON DONNE LES INFORMATIONS AUX DEUX BOUTONS*/
a.M14_ToP, a.M14_BoTTom {
  
    width: 35px;
    height: 35px;
    position: fixed;
    right: 20px;
  z-index: 999;
}


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

Ajoutes ceci:

Code:


/*LE BOUTON DU BAS*/
a.M14_ToP
{
    bottom: 60px;
    display: none;
    
}
/*LE BOUTON DU HAUT*/
a.M14_BoTTom
{
top: 260px;
}
/*ON DONNE LES INFORMATIONS AUX DEUX BOUTONS*/
a.M14_ToP, a.M14_BoTTom {
  
    width: 35px;
    height: 35px;
    position: fixed;
    right: 20px;
  z-index: 999;
}



Penser a cliquer sur le bouton



Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.
Cocher sur toutes les pages.

Déposes ceci:

Code:


$(function(){
//ON IMPORTE LE BOUTON
//LE LIEN DE L IMAGE HAUT DE PAGE
var haut="https://i.imgur.com/PZmlo2r.png";

//LE LIEN DE L IMAGE BAS DE PAGE
var bas="https://i.imgur.com/HsDQW0k.png";
$('body').append('<span><a href="#" class="M14_ToP"title="Haut de page"><img src="'+haut+'"/></a></span><span><a href="#" class="M14_BoTTom"title="Bas de page"><img src="'+bas+'"/></a></span>');});
$(document).ready(function(){
$(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;});
});


Penser a cliquer sur le bouton



Tu pourras modifier le lien des images respectivement ici:

Code:

//LE LIEN DE L IMAGE HAUT DE PAGE
var haut="https://i.imgur.com/PZmlo2r.png";

//LE LIEN DE L IMAGE BAS DE PAGE
var bas="https://i.imgur.com/HsDQW0k.png";

Impeccable !   Un énorme merci Phil.

De rien Alex .