Effet Smoothscroll (défilement fluide)

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+

effet intéressant, j'avais vu la première version, mais j'avais perdu la page ^^ (et je ne me souvenais pas que c'était sur NU)

juste une question (comme toujours ^^) : pourquoi tu utilise body et html en même temps ?

merci

Hello,

C'est une erreur, il vaut mieux utiliser html uniquement, mais body convient également, tout dépend ensuite du système dans lequel tu l'utilises.
Merci d'avoir remarqué l'erreur.

Au plaisir

avec body ça ne fonctionne pas ^^ (j'ai testé sous IE et firefox)

Hello,

Tout dépend des CSS et de ta mise en page, puisque tu es censé pouvoir faire défiler n'importe quel élément dans n'importe quel autre, à partir du moment ou le débordement et gérer en scroll.
HTML possède cependant des CSS "system" différents de body, par défaut.

Merci pour ta remarque vic.

Hello,

C'est re-moi,
En fait dans webkit ça ne marche pas si tu n'utilises pas body.
Je viens de faire un test sur un autre type de script, et je me suis rendu compte que ça ne fonctionnait pas.

Donc soit on précise systématiquement les deux, le souci étant qu'il va jouer l'animation en double en parallèle (ça ne se voit pas, mais ça fait du calcul en plus pour le processeur), soit on fait une détection de navigateur et on choisi html pour tous sauf pour webkit où on met body.

J'édite le code pour la deuxième solution, plus propre en matière de procédé.
Je remplace :

Code:

$('html').animate({

par

Code:

var container = 'html';
if ($.browser.webkit) container = 'body';
$(container).animate({

Bise !

Petite mise à jour du script avec une meilleure gestion des liens absolus.
Bises

Hello,

Je propose de procéder ainsi car je n'ai jamais réussi à faire fonctionner les feuilles JS proposées par Forum-Actif.
Mais c'est effectivement envisageable, il suffit de coller ce code dans une feuille JS et cela marchera de la même manière.

L'important étant que le script doit être appelé en fin de document (avant la balise de fin BODY).

Au plaisir

Parce que j'ai utilisé ce tuto pour la fluidité et l'autre tuto vers lequel tu nous ramène. Et la fluidité ne fonctionne pas. Faut-il modifier quelque chose pour que cela fonctionne ?

mais c'est quoi qui defile