ButtonsLesson 116Free preview

Scroll To Top Button

This lesson is part of How To · All levels

Summary

Scroll to top button is a button that appears after a user scrolls far enough and brings them back to the top of the page. The key is usually fixed in the lower right corner. JavaScript monitors the scroll's position to display or hide it, then calls scrollTo with subtle behavior.

Key points

Use position:fix to keep the button visible as the page rolls.
Hide the button when the scrollY is small, display it after passing a certain threshold.
Window.scrollTo({top: 0, behavior: 'smooth'}) rolls up with animation.
Listeners scroll should use the passive option for performance.
Give the air-labels and make sure the buttons don't cover the important content.

Full lesson

Code examples and quizzes

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