javascript - 单击并滚动顶部

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你之前$(".list-fighters li").removeClass("open");修改页面高度的调用，如下所示：

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

经过测试，更新到 300ms 以赶上高度更新。

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