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.


    Effet Smoothscroll (défilement fluide)

    Partagez
    avatar
    Riku Asakura
    MasculinAge : 30Messages : 5736

    le Dim 14 Aoû 2011 - 3: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+


    Dernière édition par Riku Asakura le Jeu 17 Nov 2011 - 0:07, édité 3 fois




    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    avatar
    vic_le_faucheur
    MasculinAge : 23Messages : 764

    le Dim 14 Aoû 2011 - 19:05

    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

    avatar
    Riku Asakura
    MasculinAge : 30Messages : 5736

    le Mar 16 Aoû 2011 - 0:15

    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 Wink




    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    avatar
    vic_le_faucheur
    MasculinAge : 23Messages : 764

    le Mar 16 Aoû 2011 - 11:00

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

    avatar
    Riku Asakura
    MasculinAge : 30Messages : 5736

    le Mar 16 Aoû 2011 - 20:05

    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.




    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    avatar
    Riku Asakura
    MasculinAge : 30Messages : 5736

    le Sam 20 Aoû 2011 - 23:38

    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 !




    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    avatar
    Riku Asakura
    MasculinAge : 30Messages : 5736

    le Jeu 17 Nov 2011 - 0:07

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




    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    avatar
    Minimoy28
    MasculinAge : 23Messages : 55

    le Ven 25 Nov 2011 - 17:22

    Coucou,

    Merci pour ce code merveilleux mais j'utilise ce scroll sur mes messages mais la fluidité de fonctionne pas et je n'y connais rien en javascript. On ne peux pas utiliser ce code en le plaçant directement dans une feuille de style javascript ?

    Mini'
    avatar
    Riku Asakura
    MasculinAge : 30Messages : 5736

    le Dim 27 Nov 2011 - 21:07

    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 Wink




    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    avatar
    Minimoy28
    MasculinAge : 23Messages : 55

    le Jeu 1 Déc 2011 - 23:36

    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 ?
    avatar
    titou9322
    MasculinAge : 21Messages : 158

    le Mar 17 Jan 2012 - 16:54

    mais c'est quoi qui defile
    Contenu sponsorisé


      La date/heure actuelle est Sam 29 Juil 2017 - 13:45