From Janky to Buttery Smooth Scrolling

If there's one thing I've learned from endless hours of scrolling—coding, reading docs, or just binging YouTube—it's the value of smooth scrolling.

It's a game-changer.

Today, I'm diving deep into how you can achieve that buttery smooth scroll on Mac and Windows. And if you run a website or blog, stick around. I've got some tips to make your site a pleasant place to scroll through.

What Exactly is Smooth Scrolling?

Ever notice how some scrolling feels like gliding on ice while others more like hopping on rocks? That's the difference smooth scrolling makes. It transforms your scrolling experience from frustrating to fluid. Just picture a side-by-side comparison: on one side, you've got that janky, stuttering scroll. On the other, smooth as silk. That's what we're aiming for.

Smooth Scrolling with Logitech Options+

For those rocking a Logitech mouse or touchpad, you're halfway there. Logitech's Logi Options+ software is your ticket to smooth scrolling bliss. It's pretty straightforward:

• Download Logi Options+.
• Install it.
• Enable smooth scrolling for all your apps and browsers.

Just like that, you're set.

Why SmoothScroll is My Go-To

Now, let me introduce you to the MVP: SmoothScroll.

Here is why I love SmoothScroll:

• Buttery smooth scroll? Check.
• Lightweight? As a feather.
• Customizable? To the moon and back.
• Free? Absolutely.

Just remember, if you've got Logi Options+ rolling, turn off its smooth scrolling. They tend to clash.

Smooth Scrolling for Your Website

Here's the cherry on top.

Making sure your website or blog offers smooth scrolling can seriously upgrade your visitor's experience.

Here's how:

• Add scroll-smooth to your html class if you're using Tailwind CSS.
• Plug in a smooth scroll plugin for WordPress.
• Or, drop in a simple CSS snippet.

Before you go too far down the rabbit hole of JavaScript-based smooth scrolling, know that there is a native CSS feature for this: scroll-behavior.

html {
  scroll-behavior: smooth;
}

And before you reach for a library like jQuery to help, there is also a native JavaScript version of smooth scrolling, like this:

// Scroll to specific values
// scrollTo is the same
window.scroll({
  top: 2500, 
  left: 0, 
  behavior: 'smooth'
});

// Scroll certain amounts from current position 
window.scrollBy({ 
  top: 100, // could be negative value
  left: 0, 
  behavior: 'smooth' 
});

// Scroll to a certain element
document.querySelector('.hello').scrollIntoView({ 
  behavior: 'smooth' 
});

Credits: Christ Coyer | CSS Tricks

P.S. If you prefer videos, make sure to check out My YouTube Channel