FluxBB.fr

Le site des utilisateurs francophones de FluxBB.

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

Pages : 1

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

david18
Membre
Lieu : France
Inscription : 28-10-2012
Messages : 467
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 11:07:06)

Hors ligne

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

Otomatic
Régisseur
Lieu : Paris, France
Inscription : 12-12-2005
Messages : 3 655
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 20:18:26

david18
Membre
Lieu : France
Inscription : 28-10-2012
Messages : 467
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

Pages : 1

Pied de page des forums