jQuery: faites défiler la fenêtre puis addClass() - comment appeler

Question

À l'intérieur d'un gestionnaire d'événements jQuery, je voudrais faire défiler la fenêtre et puis ajouter un cours à quelque chose. Ceci est mon code:

$('#foo').click(function() {  
    window.scrollTo(y); 
    $('#bar').addClass('active'); 
}); 
$(window).scroll(function() { 
    $('#bar').removeClass('active'); 
}); 

Notez que j'ai un autre gestionnaire pour supprimer cette même classe chaque fois que la fenêtre est défilée. La partie de défilement fonctionne bien, mais semble fonctionner de manière asynchrone, donc removeClass() se produit après addClass() mais avant que le défilement ne soit terminé. Je ne sais pas comment le faire en javascript. Je sais qu'il existe une fonction jQuery scrollTop() qui fait la même chose (mais qui semble avoir des problèmes entre navigateurs), mais elle n'accepte pas les rappels.

Ce dont j'ai vraiment besoin est un rappel pour ajouter la classe après le défilement est terminé. merci!

Answer 1

Il existe un plugin jQuery appelé scrollTo qui offre cette fonctionnalité (avec d'autres fonctionnalités). Je recommande d'utiliser ce plugin (consultez la config callback onAfter) ou vérifiez sa source.

Answer 2

Vous pouvez également arriver avec animate

$('#foo').click(function(){ 
    var count = 0; 
    $('html,body').animate({scrollTop:0},1000,function(){ 
    count++; 
    if (count == 2){ 
     if (!($('#bar').hasClass('active'))){ 
     $('.place').each(function(){ 
      if($(this).hasClass('active')){ 
      $(this).removeClass('active'); 
      } 
      if($(this).attr('id') == 'bar'){ 
      $(this).addClass('active'); 
      } 
     }); 
     } 
    } 
    }); 
}); 

EDIT:

donnent chaque endroit possible que vous "activez" une classe. (Par exemple « lieu »)

Ensuite, le code ci-dessus devrait fonctionner (modifié)

Answer 3

Cela défiler le navigateur vers le haut, en 1000 miliseconds de le faire, puis ajoutez une classe appelée « défilé-top » à l'étiquette BODY.

$('#foo').click(function(){ 
    // Scroll window to top, taking 1000ms 
    $(window).animate({ 
      // Animate these properties. 
      scrollTop : 0 
     },1000, function() { 
      // Animation complete callback. 
      $('body').addClass('scrolled-top'); 
    }); 
} 

Si vous alliez faire cela, vous voudrez probablement aussi ajouter la classe si l'utilisateur manuellement défilée vers le haut, mais aussi enlever la classe « top-défilement » pendant le défilement vers le bas. Si oui, alors ce serait la fonction complète:

// On page load, add class as window will start at the top 
$('body').addClass('scrolled-top'); 

// Add class to body when window is scrolled to top 
$(window).scroll(function() { 
    var scrollAmount = $(window).scrollTop(); 
    if(scrollAmount > 0) { 
     $('body').removeClass('scrolled-top'); 
    } else { 
     $('body').addClass('scrolled-top'); 
    } 
} 

// Scroll window to top, taking 1000ms 
$('#foo').click(function(){ 
    $(window).animate({ 
     // Animate these properties. 
     scrollTop : 0 
    },1000); 
} 

Notez que la fonction complète vous ne même pas besoin du rappel.