JQuery Scroll DRY

Question

Ich habe 4 Divs, auf die ich eine Scroll-Aktion anwenden möchte.

Der Code funktioniert, wenn ich es für jedes div wiederhole, aber ich möchte nur einen Block Code haben, um das Ereignis zu behandeln.

Der Code, der funktioniert, ist dies -

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

Der Code, Ich mag jetzt würde zu verwenden, ist dies -

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) 
}); 

Wenn der obige Code angewendet wird, und der Link, um die Seite angeklickt wird geht nur ein paar Pixel runter.

Vielen Dank für Ihre Hilfe.

Cheers,

Ryan

Answer 1

Es gibt ein paar Probleme:

• Ihre variable navText enthält die Click-Handler und nicht die id Sie suchen
• Von der Struktur von Ihrem Code Ich nehme an, dass Sie doppelte IDs verwenden, die zu Problemen führen können

Ohne Ihren Aufschlag diesen Code zu wissen, könnte für Sie arbeiten:

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) 
});