Javascript 滚动到id函数jQuery

所以我已经制作了一段时间的onepage网站，有一件事总是让我烦恼，那就是导航功能，我重复了大量的按钮和id

如下所示：

$('#homeB').click(function () {
    $('html, body').animate({
      scrollTop: $("#home").offset().top
    }, 1000);
    return false;
  });
  $("#aboutB").click(function() {
    $('html, body').animate({
      scrollTop: $("#about").offset().top
    }, 1000);
    return false;
  });
  $("#winesB").click(function() {
    $('html, body').animate({
      scrollTop: $("#wines").offset().top
    }, 1000);
    return false;
  });

问题是，我如何从这里变成一个不需要重复的小函数

谢谢

注意：最好没有第三方插件等。将其保存在JavaScript/jQuery中

function scrollTo($element) {
    $('html, body').animate({
      scrollTop: $element.offset().top
    }, 1000);
    return false;
}

然后你就可以把它当作

$('#homeB').click(function () {
   scrollTo($("#home"));
});
$("#aboutB").click(function() {
  scrollTo($("#about"));
});
$("#winesB").click(function() {
  scrollTo($("#wines"));
});

---

为了避免编写重复的代码，可以执行以下操作：

$（函数（）{
$（'li'）。在（'click'，函数（e）上{
e、 预防默认值（）；
$（'html，body'）。设置动画({
scrollTop:$（$（e.target）.attr（“href”）.offset（）.top
}, 1000);
});
});
nav{
位置：固定；
排名：0；
左：0；
}
div{
利润率：100px0；
宽度：100%；
高度：500px；
}
分区：第n个孩子（偶数）{
背景：#ccc；
}
分区：第n个孩子（奇数）{
背景：#4c；
}







有几种方法可以解决这个问题。如果我要这样做，我会将任何被单击的内容设置为类，然后将
data
属性设置为目标id，如下所示

<span class='nav_link' data-dest='home2'>Click me to go to home 2</span>

只需使用JQuery类选择器，而不是基于id的。所以你只需要写一次。OP要求不要重复，这个仍然重复，只是重复了少量。谢谢！这就是我一直在寻找的答案。请记住，“ul”和“li”元素不应位于nav元素中。
$('.nav_link').click(function() {
    var dest = $(this).attr('data-dest');
    $('html, body').animate({
      scrollTop: $('#'+dest).offset().top
    }, 1000);
})