JQuery Scroll DRY

Question

J'ai 4 divs auxquels je souhaite appliquer une action de défilement.

Le code fonctionne si je le répète pour chaque div mais je veux juste avoir un bloc de code pour gérer l'événement.

Le code qui fonctionne est ce -

var navText = $('.nav-text').on('click', function() { 
      var txt = $(this).attr('id'); 
      var id = '#' + txt; 
      console.log(id); 
     }); 
$('nav').on('click', function(){ 
$('html, body').animate({ scrollTop: $(navText).offset().top}, 1000) 
}); 

Lorsque le code ci-dessus est appliqué et le lien est cliqué la page -

$('nav').on('click', function(){ 
$('html, body').animate({ scrollTop: $('#about').offset().top}, 1000) 
}); 

Le code que je voudrais cette utilisation maintenant est ne descend que quelques pixels.

Nous vous remercions de votre aide.

Cheers,

Ryan

Answer 1

Il y a quelques problèmes:

• votre variable navText contient le clic-gestionnaire et non le id que vous recherchez
• De la structure de votre code je suppose que vous utilisez des ID en double qui peuvent entraîner des problèmes

Sans connaître votre code de balisage pourrait fonctionner pour vous:

HTML

<a href="#" data-id="id1" class="nav-text"></a> 

JS

$('.nav-text').on('click', function(e) { 
    e.preventDefault(); 
    var dataId = $(this).data('id'); 
    $('html, body').animate({ 
    scrollTop: $('#' + dataId).offset().top 
    }, 1000) 
});