JQuery Scroll DRY

Question

У меня есть 4 divs, к которым я хочу применить действие прокрутки.

Код работает, если я повторяю его для каждого div, но я хочу иметь только один блок кода для обработки события.

Код, который работает следующим образом -

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

код, который я хотел бы теперь использовать это -

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

Когда приведенный выше код применяется и нажатия на ссылку на страницу только уменьшается на несколько пикселей.

Благодарим за помощь.

Cheers,

Райан

Answer 1

Есть несколько вопросов:

• Ваша переменная navText содержит щелчок-обработчик и не id вы ищете
• Из структуры вашего кода Я предполагаю, что вы используете повторяющиеся идентификаторы, которые могут привести к возникновению проблем

Не зная ваш размеченный этот код может работать для вас:

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