Discussion :

[miltonis]

Bonjour à tous,

J'utilise un script Accordeon dont voici la démo

J'en suis très content, il fonctionne très bien. J'ai seulement une question à laquelle je ne trouve pas la réponse :

A l'ouverture de chaque <li>, l'élément s'ouvre et fait un "scroll to" cet élément cliqué. J'aimerais que le scroll s'arrête à 200 pixels (par exemple) du cet élément.
A force de chercher, j'ai trouvé où ça se passe mais je ne vois pas du tout comment intervenir dessus.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
// scrolls to current item or last opened item if current is -1
        _scroll             : function( instance ) {
 
            var instance    = instance || this, current;
 
            ( instance.current !== -1 ) ? current = instance.current : current = instance.$el.find('li.st-open:last').index();
 
            $('html, body').stop().animate({
                scrollTop   : ( instance.options.oneOpenedItem ) ? instance.$items.eq( current ).data( 'offsetTop' ) : instance.$items.eq( current ).offset().top
            }, instance.options.scrollSpeed, instance.options.scrollEasing );
 
        }

Je sèche, une idée s'il vous plait ?
Merci d'avance

[Darkaurora]

scrollTop : ( instance.options.oneOpenedItem ) ? instance.$items.eq( current ).data( 'offsetTop' ) : instance.$items.eq( current ).offset().topC'est ici que ça se passe, explications:

La propriété css scrollTop dans la méthode animate de jquery permet de faire un "scroll to Top" elle prend une valeur qui indique a quel point elle va "scroll to Top".

Cette valeur est retourné par un test si un élément est déjà ouvert on calcul la hauteur qui sépare le li du haut de la fenêtre.

Sinon on prend la valeur stocké à l'initialisation du plug dans chacune des li (supposition)

Pour répondre précisément à ta question , si tu souhaite ajuster il te suffit de jouer sur la condition avec + 200 ou - 200

[miltonis]

Pour répondre précisément à ta question , si tu souhaite ajuster il te suffit de jouer sur la condition avec + 200 ou - 200

Salut Darkaurora,
Merci pour ta réponse détaillée

Mais je ne vois pas où est la condition et où placer les valeurs +200/-200. Tu peux m'indiquer où ça se passe stp ?

[Darkaurora]

ça

( instance.options.oneOpenedItem ) ? instance.$items.eq( current ).data( 'offsetTop' ) : instance.$items.eq( current ).offset().top

est égal à ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
if( instance.options.oneOpenedItem ) {
  return instance.$items.eq( current ).data( 'offsetTop' )
} else {
  return instance.$items.eq( current ).offset().top
}

donc si tu fais ça:

( instance.options.oneOpenedItem ) ? instance.$items.eq( current ).data( 'offsetTop' ) - 200 : instance.$items.eq( current ).offset().top - 200
le "scroll to Top va s'arrêter a 200px du "top"... enfin normalement

[SpaceFrog]

ou avec animate ...

[Darkaurora]

cette condition est déjà dans un animate

[miltonis]

ça

( instance.options.oneOpenedItem ) ? instance.$items.eq( current ).data( 'offsetTop' ) : instance.$items.eq( current ).offset().top

est égal à ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
if( instance.options.oneOpenedItem ) {
  return instance.$items.eq( current ).data( 'offsetTop' )
} else {
  return instance.$items.eq( current ).offset().top
}

Fallait le savoir ^_^

donc si tu fais ça:
( instance.options.oneOpenedItem ) ? instance.$items.eq( current ).data( 'offsetTop' ) - 200 : instance.$items.eq( current ).offset().top - 200le "scroll to Top va s'arrêter a 200px du "top"... enfin normalement

Arf, j'avais mis les valeurs différemment : data( 'offsetTop' -200 ). D'aileurs, je m'aperçois que l'espace entre le signe '-' et '200' est très important, s'il n'y est pas, ça ne marche pas...

En tout cas ta méthode fonctionne parfaitement, merci