javascript - 滚动到 id 函数 jQuery

Question

所以我制作单页网站已经有一段时间了，一直让我烦恼的一件事是导航功能，我要重复我拥有的按钮和 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;
  });

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

谢谢。

注意:最好不要使用第 3 方插件等。将其保留在 JavaScript/jQuery 中。

Answer 1

为了避免编写重复的代码，您可以像这样做一些事情:

$(function() {
  $('li').on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({
      scrollTop: $($(e.target).attr("href")).offset().top
    }, 1000);
  });
});

nav {
  position: fixed;
  top: 0;
  left: 0;
}

div {
  margin: 100px 0 0 0; 
  width: 100%;
  height: 500px;
}

div:nth-child(even) {
  background: #ccc;
}

div:nth-child(odd) {
  background: #4c4c4c;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul>
    <li><a href="#1">1</a></li>
    <li><a href="#2">2</a></li>
    <li><a href="#3">3</a></li>
    <li><a href="#4">4</a></li>
  </ul>
</nav>

<div id='1'></div>
<div id='2'></div>
<div id='3'></div>
<div id='4'></div>