JQuery .animate() not working on IE

Question

My JQuery .animate() function seems to not working on IE. Could You please help me transform it to a pure JS solution?

var brandLink = $('#brand');
var pageTop = $('#page-top');
var navLinks = $('.nav-link');
var offerSection = $('#offer');
var techSection = $('#tech');
var portfolioSection = $('#portfolio');
var contactSection = $('#contact');
var moreBtn = $('.more-button');

navLinks.eq(0).click(() => {
    $('html, body').animate({
        scrollTop: pageTop.offset().top
    }, 500);
});

As You can see this is used for scrolling page to propper section/page-top in One page website.

Can someone explain why animate() doesn't work on IE?

Which version? Any console errors? Does it do nothing at all or just jump like in a normal # tag? — noa-dev, Oct 03 '17 at 10:42
you'll need to be specific about the version of IE. They all have different levels of support for all kinds of features. You can usually look up the level of support online if you know the feature. — ADyson, Oct 03 '17 at 10:55
@noa-dev version 11. No console errors, not only stop jumping like # tag but causing problems with fixed navbar. — svyatogor92, Oct 03 '17 at 10:55
No I think noa-dev will be asking about the version of IE, not jQuery (although that is useful info as well, but not as significant as long as it's reasonably recent). It would also be useful to see the DOCTYPE of your document, as it could something related to a standards / quirks issue — ADyson, Oct 03 '17 at 10:56
No I mean your DOCTYPE declaration only. It's only 1 line at the top of your HTML document. And the version(s) of Internet Explorer in which this problem occurs. Sorry, I though that was pretty clear. — ADyson, Oct 03 '17 at 11:02

score 1 · Accepted Answer · answered Oct 03 '17 at 11:00

Quick shot, try:

var brandLink = $('#brand');
var pageTop = $('#page-top');
var navLinks = $('.nav-link');
var offerSection = $('#offer');
var techSection = $('#tech');
var portfolioSection = $('#portfolio');
var contactSection = $('#contact');
var moreBtn = $('.more-button');

navLinks.eq(0).click(function(e) {
    e.preventDefault(); // to prevent native behaviour of the thing you press
    $('html, body').animate({
        scrollTop: pageTop.offset().top
    }, 500);
});

score 0 · Answer 2 · answered Oct 03 '17 at 11:01

0

Depending on the version of IE you need to support, have a look at this site. You will find some generic turnarounds that might help.

Also have a look at this (adding a preventDefault(); to make sure the script is working properly).

answered Oct 03 '17 at 11:01

rabsom

740
5
13

JQuery .animate() not working on IE

2 Answers2