Bouton "Haut de page"

[bertrandg]

J'ai posté plusieurs astuces mais je n'ai eu aucun retour, j'en poste une autre on ne sait jamais
Il s'agit d'un script pour aller en "haut de page", utile pour les pages avec un grand nombre d'annonces.

Créer une page nommée :  hautpage.js avec à l'intérieur

Code: [Select]

$(function(){
  $.fn.scrollToTop=function(options){
    if(options.speed){var  speed=options.speed;}else{var speed="slow";}
    if(options.ease){var  ease=options.ease;}else{var ease="jswing";}
    if(options.start){var  start=options.start;}else{var start="0";}
    var  scrollDiv=$(this);$(this).hide().removeAttr("href");
    if($(window).scrollTop()>start){
      $(this).fadeIn("slow");}
      $(window).scroll(function(){
        if($(window).scrollTop()>start){
          $(scrollDiv).fadeIn("slow");
        } else{
          $(scrollDiv).fadeOut("slow");
        }
     });
     $(this).click(function(event){
       $("html,  body").animate({scrollTop:"0px"},speed,ease);
   });
  }
});
$(document).ready(function(){
  $("#IDdubouton").scrollToTop({
    speed:1800,
    ease:"easeOutBounce",
    start:250});
});
Enregistrer cette page par exemple dans : oc-content/themes/votre_theme/js/

Rajouter dans le css de votre theme :

Code: [Select]

.backtop{
 position:fixed;
 /* La couleur de fond*/
 background:#eff0d4;
 /*La bordure*/
 border:2px solid #125371;
 /* la longueur et l'espace autour du texte*/
 width:135px;
 padding:12px;
 /* On place le bloc en bas à droite*/
 right:30px;
 bottom:35px;
 /* On ajoute un bord arrondi pour les navigateurs compatibles*/
 border-radius:7px;-moz-border-radius:7px;-khtml-border-radius:7px;-webkit-border-radius:7px    }
.backtop:hover{
 /*On change le curseur de la souris au survol*/
 cursor:pointer;
 /*On change la couleur de fond au survol*/
 background:#125371;
 /*On change la couleur de la bordure au survol*/
 border:2px solid #eff0d4;
 /*On change la couleur de texte au survol*/
 color:#eff0d4}
Insérer juste avant <?php osc_current_web_theme_path('footer.php') ; ?>
ces lignes dans search.php et le main.php de votre thème

<button type="button" id="IDdubouton" title="Haut de page" class="backtop">Haut de page</button>
<script type="text/JavaScript" src="http://www.votre_site.com/oc-content/themes/votre_theme/js/hautpage.js"></script>