CODEWITHSUNDEEP
javascriptjqueryfirefoxscroll
Edge
Edge

Reputation: 2540

jQuery scrollTo works in Chrome but not FF

Alright, so I have a scrollTo function as follows:

$.fn.scrollTo = function(t, d, o)
    {
        var scrollTarget = t;
        var offsetTop = (typeof(o) != 'undefined') ? o : Math.floor((window.innerHeight / 2) - 20);
        var duration = (typeof(d) != 'undefined') ? d : 10;
        var easing = 'swing';
        var scrollPane = $(this);
        var scrollY = (typeof scrollTarget == "number") ? scrollTarget : scrollTarget.offset().top + scrollPane.scrollTop() - parseInt(offsetTop);
        scrollPane.animate({scrollTop : scrollY }, parseInt(duration), easing, function()
        {
            if (typeof callback == 'function')
                callback.call(this);
        });
    }

I call it via $("body").scrollTo($obj, 10);

It works flawlessly in Chrome, but nothing happens in Firefox.

scrollTo and scrollPane.animate both get called, but nothing happens. No errors either, and all the values look right - it just doesn't scroll.

It's only being called once.

Upvotes: 0

Views: 64

Answers (1)

Alexander O'Mara
Alexander O'Mara

Reputation: 60527

This is because the top level page element that scrolls is inconsistent among browsers. Some browsers like Firfox require the html tag be scrolled, while WebKit based browsers like Chrome require the body element be scrolled. The easiest solution is to apply it to both elements like so.

$("html, body").scrollTo($obj, 10);

Working Example

Upvotes: 2

Related Questions