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有时间更新您之前调用页面高度offset().top的{{1}}，如下所示：

$(".list-fighters li").removeClass("open");

经过测试，更新至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);

单击并滚动顶部

2 个答案: