jQuery animate - any universal solution?

Question

So basicaly I got 2 bugs using jQuery animation, and I want to fix this bugs in Firefox, Chrome, Safari, Opera and Internet Explorer.

Bugs:

Animation does not work
Animation complete function trigger twice

I tried this:

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

Link here

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

^{Chrome: Animation does not work ; Animation complete trigger once}

^{Safari: Animation does not work ; Animation complete trigger once}

^{Opera: Animation does not work ; Animation complete trigger once}

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

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

Link here

^{Firefox: Animation does not work ; Animation complete trigger once}

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

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

^{Opera: Animation works ; Animation complete trigger once}

^{Internet Explorer: Animation does not work ; Animation complete trigger once}

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

Link here

^{Firefox: Animation works ; Animation complete trigger twice}

^{Chrome: Animation works ; Animation complete trigger twice}

^{Safari: Animation works ; Animation complete trigger twice}

^{Opera: Animation works ; Animation complete trigger twice}

^{Internet Explorer: Animation works ; Animation complete trigger twice}

My test enviroment: Windows 7

Firefox version 41.0.1

Chrome version 46.0.2490.80 m

Safari version 5.1.7

Opera version 32.0

Internet explorer version 11

Is there any solution to this problem? To remove this 2 bugs on all browsers?

Related: http://stackoverflow.com/questions/8149155/animate-scrolltop-not-working-in-firefox (Edit: See 2nd answer too) — Stryner, Nov 03 '15 at 21:26
@paulalexandru [Here's a working fiddle](http://jsfiddle.net/c2L2pheh/2/) that follows the advice of [this answer](http://stackoverflow.com/questions/8149155/animate-scrolltop-not-working-in-firefox#answer-21583714). — Stryner, Nov 03 '15 at 21:35

IndieRok · Answer 1 · 2015-11-03T21:49:47.900

1

You can use the ScrollTop property with the Animate event.

First, you need to add unique IDs to each of your DIVs, or section. Next, you will need to give each anchor the proper DIV ID to which you want this anchor to scroll to.

By using $('anchor-id').position().top , this will help find the position of that DIV relative to the top of the browser window. So each time that you will call animate, the scrolltop property will know exactly the distance it will need to scroll to reach that particular div.

And it is dynamic, if the browser window height is lower, the distance value will always be perfect.

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

edited Nov 03 '15 at 21:49

answered Nov 03 '15 at 21:35

IndieRok

1,750
1
13
21

This seems to be about anchor scrolling. Not really an answer to the question. – Shikkediel Nov 03 '15 at 21:53
@Shikkediel, granted, it is an alternate solution, but does not answer OP's original question. Stryner's solution works also, so I don't see why he would not post it here instead of the comments – IndieRok Nov 03 '15 at 21:59
If it is not relavant, I will gladly delete my answer. No offence taken – IndieRok Nov 03 '15 at 22:00
Just saying, don't mind for the rest... fiddle seems to be working fine indeed. – Shikkediel Nov 03 '15 at 22:07

score 0 · Accepted Answer · answered Nov 05 '15 at 19:20

Here was my code which did not work:

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

And here is the code that works fine in all browsers:

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

^{This answer was posted as a comment to my question and I thought that it would be helpful for others also.}

score 0 · Answer 3 · edited May 23 '17 at 12:23

If you want to solve the cross-browser problem – in a safe way, based on testing the actual browser behaviour –, and at the same time deal with a bunch of scroll-related usability issues as well, you might want to have a look at jQuery.scrollable (a component of mine).

Your test code then looks like this:

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

jQuery animate - any universal solution?

3 Answers3