Membres connectés récemment
[AWESOMEBB] Bouton pour descendre la page
Page 1 sur 1 • Partagez
- InvitéInvité
- Version du forum :AWESOMEBB
- Templates modifiés :oui
- Navigateur :Chrome
Coucou Phil, j'ai utilisé ton astuce pour remonter en haut de page. Peux-tu le modifier pour que j'ai aussi le bouton placé en haut pour redescendre vers le bas de page. Comme ici. Merci d'avance.
https://www.milouze14.com/t28430-toutes-versions-afficher-un-bouton-pour-remonter-en-haut-de-page
https://www.milouze14.com/t28430-toutes-versions-afficher-un-bouton-pour-remonter-en-haut-de-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:
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Ajoutes ceci:
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:
Penser a cliquer sur le bouton
Tu pourras modifier le lien des images respectivement ici:
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";
- InvitéInvité
Impeccable ! Un énorme merci Phil.
Sujets similaires
Créer un compte ou se connecter pour répondre
Vous devez être membre pour répondre.
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum