Question

所以基本上我使用jQuery动画得到了 2个错误，我想在 Firefox，Chrome，Safari，Opera和Internet Explorer 中修复这个错误。

错误：

动画不起作用
动画完成功能触发两次

我试过了：

$("html").animate({...}, {duration: 500, complete: function () {...}});

Link here

^{Firefox： Animation works; Animation complete trigger once}

^{Chrome：动画不起作用; Animation complete trigger once}

^{Safari：动画不起作用; Animation complete trigger once}

^{Opera：动画不起作用; Animation complete trigger once}

^{Internet Explorer： Animation works; Animation complete trigger once}

$("body").animate({...}, {duration: 500, complete: function () {...}});

Link here

^{Firefox：动画不起作用; Animation complete trigger once}

^{Chrome： Animation works; Animation complete trigger once}

^{Safari： Animation works; Animation complete trigger once}

^{歌剧： Animation works; Animation complete trigger once}

^{Internet Explorer：动画不起作用; Animation complete trigger once}

$("html, body").animate({...}, {duration: 500, complete: function () {...}});

Link here

^{Firefox： Animation works;动画完成两次触发}

^{Chrome： Animation works;动画完成两次触发}

^{Safari： Animation works;动画完成两次触发}

^{歌剧： Animation works;动画完成两次触发}

^{Internet Explorer： Animation works;动画完成两次触发}

我的测试环境：Windows 7

Firefox版本41.0.1

Chrome版本46.0.2490.80 m

Safari版本5.1.7

Opera版本32.0

Internet Explorer 11版

这个问题有解决办法吗？要在所有浏览器上删除这2个错误吗？

Answer 1

您可以将ScrollTop属性与Animate事件一起使用。

首先，您需要为每个DIV或部分添加唯一ID。接下来，您需要为每个锚点提供您希望此锚点滚动到的正确DIV ID。

通过使用$（＆＃39; anchor-id＆＃39;）。position（）。top，这将有助于找到该DIV相对于浏览器窗口顶部的位置。因此，每次调用animate时，scrolltop属性都会确切地知道滚动到达特定div所需的距离。

它是动态的，如果浏览器窗口高度较低，距离值将始终是完美的。

Working JSFIDDLE

HTML：

<div class="step1">Step 1 <a href="#step2">Step 2</a><br></div>
<div id="step2" class="step2">Step 2<a href="#step3">Step 3</a></div>
<div id="step3" class="step3">Step 3<a href="#step4">Step 4</a></div>
<div id="step4" class="step4">Step 4</div>

使用Javascript：

$(function(){
    $('a').click(function(){
        var destination = $(this).attr('href');
        $('html,body').animate({scrollTop:$(destination).position().top}, 'slow');
    });
});

Answer 2

这是我的代码无效：

$("html,body").animate({
    scrollTop: "500px"
}, {
    duration: 500,
    complete: function () {
        alert('Test');            
    }
});

以下是适用于所有浏览器的代码：

$("html,body").animate({
    scrollTop: "500px"
}, {
    duration: 500
})
.promise()
.then(function () {
    alert('Test');            
});

^{这个答案是作为对我的问题的评论发布的，我认为这对其他人也有帮助。}

Answer 3

如果您想以安全的方式解决跨浏览器问题，基于测试实际的浏览器行为 - 并同时处理a bunch of scroll-related usability issues，您可能希望了解一下在jQuery.scrollable（我的一个组成部分）。

您的测试代码如下所示：

$( window ).scrollTo( "500px", { 
    duration: 500, 
    complete: function () { alert( "Test" ); };
} );

jQuery动画 - 任何通用的解决方案？

3 个答案: