Question

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

点击[trigger-btn]后使用slideDown函数显示隐藏的DIV，所以我们测试得到[selectable icon's DIV]的[offset（）。top]并将其应用到[icons-list]的[scrollTop] ]但它走错了位置。

AT!BAND?

Answer 1

这就是我为一个项目做过一次的方式 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的顶部

在slideDown之后滚动到隐藏div中的元素

1 个答案: