1

有一个隐藏的 DIV（有一个特定的高度）有很多可选的图标 DIV，这个 DIV 由 slideDown jQuery 函数显示，我想滚动到选定的嵌套图标 DIV（在隐藏的 div 中间没有出现因为高度限制的）在slideDown ..之后

单击[trigger-btn]后，使用slideDown函数显示隐藏的DIV，所以我们测试获取[可选图标的DIV]的[offset().top]并将其应用于[icons-list]的[scrollTop]，但它走到了错误的位置。

<div class="elements-container">
    <div class="trigger-btn"></div>

    <div class="hidden-div-wrapper">

        <select class="icons-library">...</select>

        <div class="find-icon">...</div>

        <div class="icons-list">

            <!-- Selectable Icon DIVs -->

        </div>
    </div>
</div>
4

1 回答 1

0

这就是我曾经为一个项目做的事情 https://jsfiddle.net/bimbonkens/3ssfvyms/

CSS

.slideable {
  background: #000;
  display: none;
}

.slideable div {
  width: 50%;
  margin: 0 auto 50px;
}

.buffer {  
  background: #fff;
  height: 800px;
}

.target {  
  background: #cfc;
  height: 1200px;
}

HTML

<div class="slideable">
  <div class="buffer"></div>
  <div class="target"></div>
</div>

JS

$(document).on("click", function() {
    $('.slideable').slideDown({
    duration: 800,
    done: function() {
        $('body').stop().animate({
        scrollTop: $('.target').offset().top
      })
    }
  });
});

另外，如果你有一个职位：固定；标题，那么你将不得不考虑它的高度：

scrollTop: $('.target').offset().top - fixed_element_height

编辑

摆弄正确的解决方案http://jsfiddle.net/bimbonkens/p9huerde/

这里的关键时刻是 offset().top 从整个文档的顶部获取偏移量，所以为了解决这个问题，我减去了父 div 的 position().top

于 2016-11-03T09:49:35.313 回答