javascript - jQuery，通过单击<li>项目平滑滚动到Div

我想您想知道为什么我还要发布这个问题，因为那里提供了大量示例。但是以某种方式我无法使它正常工作。

所以我的问题是。我有一个jQuery函数，该函数遍历我的divs并获取其ID's。所以这是循环

var linames =["Intro","1925","1935","1945","1955","1965","1975","1985","1995","2005","Now"];
var i = 0;
function getSectionIDs()
{
    $("div.panel-grid-cell").children().each(function() {
        if(linames[i] !== undefined) {
          li += "<li><a href='#"+$(this).attr('id')+"'>"+linames[i]+"</a></li>";
        }
        i++;
    });
    $("ul.timeline-items").append(li);
}

以及以下HTML结构。

<div class="panel-grid-cell">
    <div id="panel-101-0-0-0">...</div>
    <div id="panel-101-0-0-1">...</div>
    <div id="panel-101-0-0-2">...</div>
    ...
    <div id="panel-101-0-0-12">...</div>
</div>

所以我想要实现的是。单击li项，然后平滑滚动至相应的div。此刻，它只是瞬间跳跃。

尝试了大约10种不同的方式，但仍然没有效果。

最佳答案

这是一个完全正常的演示。

$(function() {
  var linames = ["Intro", "1925", "1935", "1945", "1955", "1965", "1975", "1985", "1995", "2005", "Now"];

  function getSectionIDs() {
    var li = "";
    $("div.panel-grid-cell").children().each(function(index) {
      if (linames[index] !== undefined) {
        li += "<li><a href='#" + $(this).attr('id') + "'>" + linames[index] + "</a></li>";
      }
    });
    $("ul.timeline-items").append(li);
    $("ul.timeline-items li a").click(function(e) {
      e.preventDefault();
      var anchor_id = $(this).attr("href");
      $('html,body').animate({
        scrollTop: $('' + anchor_id + '').offset().top
      }, 2000);
    });
  }
  getSectionIDs();
});

.panel {
  height: 900px;
  width: 100%;
  display: block;
}

.panel:nth-child(odd) {
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="timeline-items"></ul>
<div class="panel-grid-cell">
  <div class="panel" id="panel-101-0-0-0">...</div>
  <div class="panel" id="panel-101-0-0-1">...</div>
  <div class="panel" id="panel-101-0-0-2">...</div>
</div>