Scroll vertical bouton suivant précédent

Version imprimable

Bonjour,
Je viens sur le forum pour avoir de l'aide. Ca fait un moment que je l'arrache les cheveux sur ce problème j'ai essayé plusieurs choses qui n'ont rien donné.

En gros, j'ai une page WEB dont le contenu slide horizontalement lorsque l'on clique sur les items du menu. Jusque là OK, ça marche. J'ai voulu rajouter des boutons de navigations suivant/précédent qui lorsque l'on clique dessus passe au slide suivant en ayant le même effet d'animation que lorsque l'on clique sur un item du menu et là, je coince. Mon bouton suivant avance que de quelques pixels sans aller directement au slide suivant :(.

J'ai fais un fiddle http://jsfiddle.net/jarod51/x66hA/3/
pour mieux comprendre mon problème.

Pour le passage d'un slide à un autre en passant par le menu j'ai fais :
Code:

1 2 3 4 5 6 7 8 9 10 $(document).ready(function() { $("#banner a").bind("click",function(event){ event.preventDefault(); var target = $(this).attr("href"); $("html, body").stop().animate({ scrollLeft: $(target).offset().left, scrollTop: $(target).offset().top }, 1200); }); });
Pour mon bouton next (celui qui ne marche pas), j'ai fais :
Code:

1 2 3 4 5 6 7 8 9 $(function() { $('#next').bind('click',function(event){ event.preventDefault(); var $anchor = $(this); $("html, body").stop().animate({ scrollLeft: $($anchor).offset().left }, 1000); }); });
Avez vous une idée de comment m'y prendre ? Merci.

Mais tu n'arrives pas à bien spécifier tes targets pour le bouton next, comment tu veux qu'il anime quelque chose que tu ne lui a pas donné, il faut bien comprendre le mécanisme. Quand tu cliques sur un lien tu récupère le sélecteur qu'il doit se déplacer vers avec l'animation, alors là tu dois garder l'état actuel dans des variables pour savoir le suivant et le précédant, car les animations sont déclenché par plusieurs sources.

Alors j'ai ajouté un petit astuce au chargement de la page pour que les boutons next et previous fonctionne même si tu n'avais cliqué sur aucun lien. Le suivant pointe le suivant de home, et l'autre le dernier.

Code:

1
2
var suivant=$("#home").next();
    var precedant=$("#wrap div").last();

Et puis sur ce qui marche il faut gérer suivant et précédant après l'animation

Code:

1
2
3
4
5
6
7
8
9
10
11
12
$("#banner a").bind("click",function(event){
                   event.preventDefault();
                   var target = $(this).attr("href");
 
                   $("html, body").stop().animate({
                       scrollLeft: $(target).offset().left,
                       scrollTop: $(target).offset().top
 
                   }, 1200);
                       suivant=$(target).next();
                       precedant=$(target).prev();
               });

Et voici comment tu devrais coder ton next:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
  $('#next').bind('click',function(event){
         event.preventDefault();
 
    $("html, body").stop().animate({
                       scrollLeft: suivant.offset().left
 
 
                   }, 1200);
                    precedant=suivant.prev();
//S'il n'est pas le dernier
                   if(!suivant.is("#wrap div:last"))
                    suivant=suivant.next();
               });

Je t'ai offert un bonus sur le previous que tu n'a pas traité, ça se code de la même logique:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
$('#prev').bind('click',function(event){
         event.preventDefault();
 
    $("html, body").stop().animate({
                       scrollLeft: precedant.offset().left          
                   }, 1200);
 
                    suivant=precedant.next();
//S'il n'est pas le premier
                   if(!precedant.is("#wrap div:first"))
                    precedant=precedant.prev();
 
               });

Demonstation

Salut,
Je tenais à m'excuser pour le retard de ma réponse. J'avais totalement zappé ta réponse. Merci beaucoup pour ton aide. J'ai codé d'une autre façon en faisant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
$(function () {
		var 
			animation = function ( href ) {
				var 
					name = "active",
					element = $( "a[href='" + href + "']" );
 
				$( "html, body" ).stop().animate( {
					scrollLeft: $( href ).offset().left
				}, 1200 );
 
				element.closest( "ul" ).find( "li" ).removeClass( name );
				element.parent().addClass( name );
			},
			menu = $( "#list" );
 
		animation( menu.find( "li" ).eq( 0 ).find( "> a" ).attr( "href" ) );
 
		$( "#cssmenu a" ).bind( "click", function( event ) {
			var target = $( this ).attr("href");
 
			animation( target );
 
			event.preventDefault();
		} );
 
		$( "#next, #prev" ).click( function ( event ) {
			var
				positionActiveClass = menu.find( "> li.active" ).index(),
				menuLength = menu.find( "> li" ).length - 1,
				buttonId = $( this ).attr( "id" );
 
			if ( buttonId === "next" ) {
				if ( positionActiveClass === ( menuLength ) ) {
					newElementActiveClass = menu.find( "li" ).eq( 0 );
					newPositionActiveClass = newElementActiveClass.find( "> a" ).attr( "href" );
 
					animation( newPositionActiveClass );
				} else {
					newElementActiveClass = menu.find( "li" ).eq( positionActiveClass + 1 );
					newPositionActiveClass = newElementActiveClass.find( "> a" ).attr( "href" );
 
					animation( newPositionActiveClass );
				}
			} else {
				if ( positionActiveClass === 0 ) {
					newElementActiveClass = menu.find( "li" ).eq( menuLength );
					newPositionActiveClass = newElementActiveClass.find( "> a" ).attr( "href" );
 
					animation( newPositionActiveClass );
				} else {
					newElementActiveClass = menu.find( "li" ).eq( positionActiveClass - 1 );
					newPositionActiveClass = newElementActiveClass.find( "> a" ).attr( "href" );
 
					animation( newPositionActiveClass );
				}
			}
 
			event.preventDefault();
		} );
 
	} );