AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.



1 résultat trouvé pour auteur_Riku_Asakura

Riku Asakura

Effet Smoothscroll (défilement fluide) - Dim 14 Aoû 2011 - 1:01


Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide


Hello,

Voilà un code qui vous permettra de faire un défilement fluide.
Plus précisément, cela aura comme effet que lorsque vous descendez vers le bas ou le haut du forum à l'aide de flèches, le mouvement sera progressif à la place de saccadé ou instantané.


Et bien aujourd'hui je vous en propose un tout neuf qui utilise jQuery, la bibliothèque javascript chargée automatiquement par vos forums.
Voici le code :

Code:
$(document).ready( function() {

  var speedy = 400;

  function scrollTo(element) {
      $(element).click(function(){
        var goscroll = false;
        var the_hash = $(this).attr("href");
        var regex = new RegExp("(.*)\#(.*)","gi");

        if(the_hash.match("\#")) {

            the_hash = the_hash.replace(regex,"$2");

            if($("#"+the_hash).size()>0) {
              the_element = "#" + the_hash;
              goscroll = true;
            }
            else if($("a[name=" + hash + "]").size()>0) {
              the_element = "a[name=" + the_hash + "]";
            goscroll = true;
            }
             
            if(goscroll) {
              var container = 'html';
              if ($.browser.webkit) container = 'body';
              $(container).animate({
                  scrollTop:$(the_element).offset().top
              }, speedy);
              return false;
            }

        }
      });
  }
 
  scrollTo('a');
});


Ce code est à placer dans PA > Modules > Html & Javascript, sur toutes les pages.

D'après les fonctions utilisées, ce code devrait fonctionner sur tous les navigateurs.
Pour le tester il suffit de cliquer sur les boutons "Top" et "Bottom" disséminés un peu partout dans les topics :)

Pour personnaliser la vitesse d'animation, il suffit de changer la valeur de la première variable nommée speedy.

Si vous avez des questions je suis là.
Amusez-vous bien !

Info complémentaires
- Taille du script : 0,596 ko
- Version 1.5 (dernière màj : optimisation pour les liens absolus)
- Version originale par Riku Asakura
- Creative Commons (pas d'utilisation commerciale, partage à l'identique, citation de l'auteur)
- Compatibilité : Firefox 2+, Opera 9+, Internet Explorer 6+, Chrome 10+, Safari 4+


Revenir en haut

La date/heure actuelle est Jeu 20 Sep 2018 - 9:08