Question

我猜你想知道我为什么发布这个问题，因为那里有大量的例子。但不知怎的，我不能让这个工作。

所以我的问题是。我有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种不同的方式，但仍然没有效果。

Answer 1

这是一个完全有效的演示。

＆＃13;

$(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();
});

＆＃13;

.panel {
  height: 900px;
  width: 100%;
  display: block;
}

.panel:nth-child(odd) {
  background-color:red;
}

＆＃13;

<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>

＆＃13;

jQuery，通过单击<li>项目顺利滚动到Div

1 个答案: