Wouldn't an even simpler solution be to just use the scrolling built into browsers?
It's a gray slab that looks like a tombstone riding a straight, dull rollercoaster and unless your site makes a point of having a '90s inspirational look there's no way to integrate them in a page so that it doesn't feel completely detached.
I am always looking for excuses to get rid of stuff.
Putting a "smooth scrolling" library in makes about as much sense as rendering all of your site's text on canvas because some computers have font aliasing issues. It reeks of a micromanaging CEO getting fixated on some arbitrary requirement that makes stuff look better only on his computer.
I agree that scrolling virtual spaces should be native and hardware accelerated whenever possible, but I think we are talking about different use cases.
Looking cool at the request of some manager does not constitute a need.
Done right, animation isn't just snazzy, it produces a more usable, more approachable user interface. It helps the user keep a good mental model of what's going on. It's easier for them to mentally track "ah, when I select this item, it also selects that other item in the other list".
It's the same reason why when you click an app on your phone it animates up from the app icon when the window opens. The animation wordlessly tells the user "I'm opening this app, and the window that's appearing is born of the icon you just clicked." Necessary? Not exactly. More natural? Absolutely. Nothing just snaps into existence in the real world, except for maybe things like lightning.
When things appear out of nowhere it can be jarring. Animation is especially called for when it might not be intuitive why you're making a change to the visual state, or when you want to call attention to something.
Keep in mind that a generation ago, pretty much every piece of software (even games!) came with a printed manual that the user needed to read first before expecting to be able to accomplish anything. Today users expect to be able to figure things out for themselves, and animation is part of the user experience that helps users learn their applications naturally by exploring the user interface.
<style>
html, body {
scroll-behavior: smooth;
}
</style>
<script>
// Uses native smooth scrolling if available, otherwise uses a jQuery fallback
// Just add data-scroll attribute to any anchor you want to make smooth
// Add data-scroll-header to a sticky nav / header to offset the window top
if (!('scrollBehavior' in document.documentElement.style)) {
// jQuery fallback
// Taken from https://css-tricks.com/snippets/jquery/smooth-scrolling/
$('[data-scroll]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top - $('[data-scroll-header]').height()
}, 600);
return false;
}
}
});
}
</script>Why would I need smooth scroll? All it achieves is slows down the scrolling so it takes me longer to get to where i want to in the page.