I have added smooth scrolling to a site of mine using this piece of JavaScript when clicking on hash links.

$('a[href*=#]')
    .click(onAnchorClick);

function onAnchorClick(event)
{
    return ! scrollTo(this.hash);
}


function scrollTo(target)
{
    var e = $(target);
    var y = e.exists() ? e.offset().top : 0;

    if(y == 0 && target != '#top')
        return false;

    if(Math.max($('html').scrollTop(), $('body').scrollTop()) != y)
        $('html,body')
            .animate({scrollTop: y}, 500, function() { location.hash = target; } );
    else
        location.hash = target;

    return true;
}

$.fn.exists = function()
{
    return this.length > 0 ? this : false;
}

Works fantastic in desktop browsers and looks to work fine on at least iOS devices as well. However, on my WinPhone 8 device it was garbage. Scrolling was a mess and didn't even end up where it should. So I decided to not enable it there through an if( ! /Windows Phone 8\.0/.test(navigator.userAgent)).

Now it works well, and seems the browser on the WinPhone actually is smooth scrolling by default, which is great.

But it is of course a bit dumb to have a smooth scroll script active if the browser already does this by default. Is there a way I can detect if a browser already has a smooth scrolling feature enabled?

I have added smooth scrolling to a site of mine using this piece of JavaScript when clicking on hash links.

$('a[href*=#]')
    .click(onAnchorClick);

function onAnchorClick(event)
{
    return ! scrollTo(this.hash);
}


function scrollTo(target)
{
    var e = $(target);
    var y = e.exists() ? e.offset().top : 0;

    if(y == 0 && target != '#top')
        return false;

    if(Math.max($('html').scrollTop(), $('body').scrollTop()) != y)
        $('html,body')
            .animate({scrollTop: y}, 500, function() { location.hash = target; } );
    else
        location.hash = target;

    return true;
}

$.fn.exists = function()
{
    return this.length > 0 ? this : false;
}

Works fantastic in desktop browsers and looks to work fine on at least iOS devices as well. However, on my WinPhone 8 device it was garbage. Scrolling was a mess and didn't even end up where it should. So I decided to not enable it there through an if( ! /Windows Phone 8\.0/.test(navigator.userAgent)).

Now it works well, and seems the browser on the WinPhone actually is smooth scrolling by default, which is great.

But it is of course a bit dumb to have a smooth scroll script active if the browser already does this by default. Is there a way I can detect if a browser already has a smooth scrolling feature enabled?

• javascript
• browser
• cross-browser
• browser-detection

• Maybe in each animation step check whether the .scrollTop still has the value you've assigned to it before. That of course would require doing it manually, not with .animate(), of course, but shouldn't be too hard. – Bergi Commented Apr 20, 2014 at 14:51
• @Bergi - ( I know this is 5 years later, but...) An unfortunate side effect of the implementation that is put in place is that it misuses the wheel event for these smooth scrolling events. When the user moves the mouse wheel once, smooth scrolling continuously fires wheel events in order to scroll from. However, the user is not actually moving the wheel. – Travis J Commented Dec 20, 2019 at 19:29
• @TravisJ Luckily now there is also a CSS alternative! Added it as a new accepted answer