Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • Books
Search Account

Articles Tagged
smooth scrolling

6 Articles
{
,

}
Direct link to the article Fixing Smooth Scrolling with Find-on-Page
:focus-within smooth scrolling

Fixing Smooth Scrolling with Find-on-Page

Back when we released the v17 design (we’re on v18 now) of this site. I added html { scroll-behavior: smooth; } to the CSS. Right away, I got comments like this (just one example):

… when you control+f or

…
Avatar of Chris Coyier
Chris Coyier on Jan 12, 2021
Direct link to the article Smooth Scrolling for Screencasts
screencasts scrolling smooth scrolling

Smooth Scrolling for Screencasts

Let’s say you wanted to scroll a web page from top to bottom programmatically. For example, you’re recording a screencast and want a nice full-page scroll. You probably can’t scroll it yourself because it’ll be all uneven and jerky. …

Avatar of Chris Coyier
Chris Coyier on Mar 12, 2019
Direct link to the article Downsides of Smooth Scrolling
scroll-behavior scrolling scrollIntoView smooth scrolling

Downsides of Smooth Scrolling

Smooth scrolling has gotten a lot easier. If you want it all the time on your page, and you are happy letting the browser deal with the duration for you, it’s a single line of CSS:

html {
  scroll-behavior: smooth;
…
Avatar of Chris Coyier
Chris Coyier on Mar 11, 2019
scroll-behavior scrolling smooth scrolling

scroll-behavior

The scroll-behavior property in CSS allows us to define whether the scroll location of the browser jumps to a new location or smoothly animates the transition when a user clicks a link that targets an anchored position within a scrolling …

Avatar of Geoff Graham
Geoff Graham on Jan 30, 2020
accessibility scrolling smooth scrolling

Smooth Scrolling and Accessibility

Smooth scrolling (the animated change of position within the viewport from the originating link to the destination anchor) can be a nice interaction detail added to a site, giving a polished feel to the experience. If you don’t believe me, …

Avatar of Heather Migliorisi
Heather Migliorisi on Apr 14, 2017
jQuery scroll-behavior scrolling smooth scrolling

Smooth Scrolling

Hey! 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 …

Avatar of Chris Coyier
Chris Coyier on Feb 19, 2019
Our Learning Partner
Frontend Masters logo
Frontend Masters

Need front-end development training?

Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.

CSS-Tricks is created by Chris and a team of swell people.

Keep up to date on web dev

with our hand-crafted weekly newsletter

Tech
  • WordPress (CMS)
  • Jetpack (Search, Backup)
  • WooCommerce (eCommerce)
  • Local (Development)
Hosting
  • Flywheel
Family
  • CodePen
  • ShopTalk Show
Minisites
  • The Power of Serverless
  • Upcoming Conferences
  • Coding Fonts
Contact
  • Email
  • Sponsorship Info
  • Guest Writing
Buy
  • Posters & Swag
  • Membership
Follow
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • GitHub
  • iTunes
  • RSS
Back to Top