单击和scrollTop

Question

我和offset.top在部门战斗机上有问题。http://jsfiddle.net/sz8YP/1/

也就是说，在点击下一个战斗机后，把方向盘压得太远了。

$(".list-fighters li .toogle").click(function(e) {
    $(".list-fighters li").removeClass("open");
    $(this).parent("li").toggleClass("open");
    $('html, body').animate({scrollTop: $(this).offset().top}, 100);
});

有办法解决吗？

Answer 1

您需要在超时时调用scrolltop()，以便使DOM有时间从之前修改页面高度的调用$(".list-fighters li").removeClass("open");中更新offset().top，如下所示：

var deez = this;
setTimeout(function() {
   $('html, body').animate({scrollTop: $(deez).offset().top}, 100);
}, 300);

经过测试，更新到300毫秒来捕捉高度更新。

Answer 2

这都是因为你同时有几个动画。其中有些是用JavaScript定义的，有些是用CSS定义的。

CSS (main.css:233)

.list-fighters li {
    transition: height 350ms ease;
    -webkit-transition: height 350ms ease;
}

JavaScript

$('html, body').animate({scrollTop: $(this).offset().top}, 100);

如您所见，您可以启动动画，它可以折叠打开的战斗机描述，并且需要350ms来更新它的高度。您所需要的只是等待这么长的时间，以获得所有元素的适当高度。

var that = this;
setTimeout(function() {
    $('html, body').animate({scrollTop: $(that).offset().top}, 100);
}, 350);