Discussion :

[laurentche]

Bonjour,
Sous symfony jai réalisé une onepage avec une galerie d'image qui s'affiche avec un sous menu qui me permet d'afficher les images en fonction de la catégorie. Lorsque je clique sur le menu pour aller à la galerie cela fonctionne. Par contre que je clique sur le sous menu pour filtrer les images, les images sont bien filtrées mais la page se rafraichi et me remet au sommet de la page alors que j'aimerai qu'elle reste à l'endroit de la galerie.
Il y a ce petit bout

Code :

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

1
2
3
4
 
 
 	var scrollTo = function(){
    $('html, body').animate({scrollTop: cible.offset().top}, 750);

Après par contre je n'arrive pas à laisser la page sur la galerie apres apres avoir appliquer le filtre réalisé avec symfony

[laurentche]

la solution

Dans chaque menu qui appellera la fonction du controller ajouter le même id (ancre), ici #portfolio, que celui utilisé dans la fonction jquery l'ancre :

Code :

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

1
2
3
 
// sous menu pour sélectionner les catégorie
 <a href="{{ path('laurent_route_SelectionCategories', { 'categorie' : categorie.id }) }} #portfolio">{{ categorie.nom}}</a> |

code Jquery :

Code :

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

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
 
$(document).ready(function(){
 
   $('#nav li a').click(function(){
 
        $('#nav li a').removeClass('active');
        $(this).addClass('active');
         var id = $(this).attr('href');
 
        scrollTo(id);
 
        return false;
 
   });
 
   function scrollTo(target){
       if($(target).length>=1){
           height=$(target).offset().top;
       }
       $('html,body').animate({scrollTop: height}, 1200);
       return false;
 
   }
 
});

le menu lié au jquery

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav" id="nav">
         <li><a href="#home" class="active">Accueil</a></li>
         <li><a href="#quisuisje">Qui suis-je</a></li>
         <li><a href="#competence">Compétence</a></li>
         <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="#contact">Contact</a></li>
     </ul>
 
        </div>