FluxBB.fr

Le site des utilisateurs francophones de FluxBB.

Recherche rapide

Vous n'êtes pas identifié(e).

Version 1.4.13 : [.tar.gz][.zip] (maj 20/10/2014)
Pack langue française pour 1.4.x : [.zip] (maj 06/01/2012)

Branche 1.5.x : fluxbb.org
Pack langue française pour 1.5.x : [.zip] (maj 14/01/2016)

Ancienne Version 1.2.24 fr : [.zip] (maj 26/08/2011)

Vous avez un problème ?
Avant de poser votre question sur les forums d'entraide nous vous invitons à consulter :

#1 01-05-2014 09:36:03

david18
Habitué très actif
Lieu : France
Inscription : 28-10-2012
Messages : 466
Site Web

Bouton top pour forum

Bonjour,


Je voudrait vous faire part d'un bouton top  que j'ai réaliser et qui serait indispensable pour votre forum  fessant appel a  un script jquery  du html et du css   c'est tout !!  afin qu'il soit plus visible en bas a droite  partant de l'idée  du bouton du haut de mon blog de wordpress  wink


irkk.jpg


Dossier modifier :

Main.tpl
style.css


Main.tpl

entre les balise  <Head> ajoutés ce code suivant

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>


</head>

Ensuite sous la balise <body> ajoutés ce script :

<body>

<script type="text/javascript">$(function(){
  $('#haut_up').click(function() {
    $('html,body').animate({scrollTop: 0}, 'slow');
  });

  $(window).scroll(function(){
     if($(window).scrollTop()<50){
        $('#haut_up').fadeOut();
     }else{
        $('#haut_up').fadeIn();
     }
  });
});</script>

</body>

Et tout a la fin de main.tpl  sous cette balise <div class="clearer"></div> ajoutés ;

  <div class="clearer"></div>



<div id="haut_up">
   <img alt="Retour en haut" title="Retour en haut" src="fleche.png" width="40" />
</div>


 <pun_footer>

Note: remplacer fleche.png par le lien de direction  de votre image personnaliser soit  40 x45 pixel


Dans votre style.css de votre thème actuel  ajoutés tout a la fin :


#haut_up
{
position: fixed;
bottom: 15px;
right: 25px;
cursor: pointer;
display:none;
}

résultat finale avec un bouton crée sous photoshop

wmi2.jpg



ps : si vous avez des questions et en espérant que cela vous aura été utile merci pour votre lecture ..


le bouton disparaît quand vous remonter et réapparaît en descendant vers le bas .


cdlt

Dernière modification par david18 (01-05-2014 10:07:06)

Hors ligne

#2 01-05-2014 15:19:10

Otomatic
Régisseur
Lieu : Paris, France
Inscription : 12-12-2005
Messages : 3 483
Site Web

Re : Bouton top pour forum

Bonjour,

Tu sais, pour retourner en « haut de page », pas besoin de Jquery, de CSS et de PHP. Un simple appui sur la touche Début et hop!, on est en haut de page. siffle


Ce n'est pas parce que l'erreur se propage qu'elle devient vérité. Gandhi
Sont différents : ça et sa - est et ait - à et a - ce et se - mes et mais ou met - été et était - c'est et ces - ce-si et ceci
La vie sans musique est tout simplement une erreur, une fatigue, un exil. Friedrich Nietzsche

Hors ligne

#3 01-05-2014 19:18:26

david18
Habitué très actif
Lieu : France
Inscription : 28-10-2012
Messages : 466
Site Web

Re : Bouton top pour forum

bonsoir ,

je trouve que c'est un peu excessif et simplissime ta méthode après chacun fait ce qu'il veut  blink

cdlt

Hors ligne

Pied de page des forums