MoreLesson 214Free preview

Smooth Scroll

This lesson is part of How To · All levels

Summary

Smooth scroll makes the movement to the page smoothly, rather than jumping straight. CSS provides scroll-behavior: smooth that applies to anchor links and scroll calling API. For more specific controls, JavaScript can use scrollIntoView or window.scrollTo with the behavior option: 'smooth'.

Key points

Scroll-behavior: smooth on html activating smooth scroll for anchor
An anchor link uses href='#id' to go to the destination element
ScrollIntoView({ behavior: 'smooth' }) gives a subtle effect of JavaScript
Use scroll-padding-top to keep the headline uncovered

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.