Detect if browser has smooth scrolling feature already

browser, browser-detection, cross-browser, javascript

Solution

Several years later, there now is a CSS property in the Working Draft for this:

`scroll-behavior`

So instead of the Javascript in my original question, or similar, we can just do this:

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

Right now, it seems to work for all browsers except IE and Edge, and since this is just a nice-to-have feature that makes things look a bit nicer... Yeah, I don't really care about IE or Edge.

Problem

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?

Original source