JQuery Scroll DRY

Question

我有4個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) 
}); 

當上面的代碼應用和鏈接被點擊的頁面只能下降幾個像素。

謝謝你的幫助。

乾杯，

瑞安

Answer 1

有幾個問題：

• 你的變量navText包含的點擊處理程序，而不是id你正在尋找
• 從結構您的代碼我假設您使用可能導致問題的重複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) 
});