javascript - jQuery animate - 任何通用解决方案？

Question

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

错误:

1. 动画不工作
2. 动画完成函数触发两次

我试过这个:

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

Link here

^{Firefox: 动画效果 ; 动画完成触发一次}

^{Chrome: 动画不工作； 动画完成触发一次}

^{Safari:动画不工作； 动画完成触发一次}

^{Opera:动画不工作； 动画完成触发一次}

^{Internet Explorer: 动画效果 ; 动画完成触发一次}

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

Link here

^{Firefox: 动画不工作； 动画完成触发一次}

^{Chrome: 动画效果 ; 动画完成触发一次}

^{Safari: 动画效果 ; 动画完成触发一次}

^{歌剧: 动画作品 ; 动画完成触发一次}

^{Internet Explorer:动画不工作； 动画完成触发一次}

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

Link here

^{Firefox: 动画效果 ;动画完成触发两次}

^{Chrome: 动画效果 ;动画完成触发两次}

^{Safari: 动画效果 ;动画完成触发两次}

^{歌剧: 动画作品 ;动画完成触发两次}

^{Internet Explorer: 动画效果 ;动画完成触发两次}

---

我的测试环境:Windows 7

Firefox 版本 41.0.1

Chrome 版本 46.0.2490.80m

Safari 浏览器版本 5.1.7

歌剧版本 32.0

Internet 浏览器版本 11

---

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

Answer 1

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

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

通过使用 $('anchor-id').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');
    });
});