JQuery Scroll DRY

Question

我有4个div，我想要应用滚动操作。

如果我为每个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)
});