Premium Only Content

Javascript & CSS Back To Top Button
Welcome back to another of my 30 Days Of Frontend Challenges videos. In today's frontend challenge, we're going to build an animated back to top button. We'll have the button hidden by default, but once the user starts to scroll, we'll hide it. When the user clicks it, we'll animate the page back to the top.
My website
https://www.pixelrocket.store
Download project files (you need this if you want to code along):
https://www.dropbox.com/s/v2hzlar1pv67f5n/Day%20Eight%20-%20Back%20To%20Top%20Button.zip?dl=0
30 Days Of Frontend Playlist
https://www.youtube.com/playlist?list=PLCvPStjGyw0eIMVhkIyy7Xyu90vNZwjPr
Window.scroll function
https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll
Timestamps
0:00 Intro
1:55 Setup Button HTML
2:50 Setup Button Styling
7:30 Setup Button Javascript
-
1:00:32
VINCE
4 hours agoRest In Peace Charlie Kirk | Episode 123 - 09/11/25
324K273 -
LIVE
LFA TV
7 hours agoLFA TV ALL DAY STREAM - THURSDAY 9/11/25
4,962 watching -
LIVE
Bannons War Room
6 months agoWarRoom Live
8,345 watching -
25:21
The Shannon Joy Show
2 hours agoA message of encouragement and a call for faith and unity after the tragic killing of Charlie Kirk
35.3K9 -
1:31:37
The Big Mig™
3 hours agoIn Honor Of Charlie Kirk, Rest In Peace 🙏🏻
32.2K14 -
1:36:35
The White House
5 hours agoPresident Trump and the First Lady Attend a September 11th Observance Event
108K41 -
1:38:49
Dear America
4 hours agoWe Are ALL Charlie Now! This Isn’t The End. We Will FIGHT FIGHT FIGHT
189K193 -
2:09:21
Badlands Media
11 hours agoBadlands Daily: September 11, 2025
68.8K19 -
2:59:26
Wendy Bell Radio
8 hours agoA Watershed Moment
89.2K209 -
4:24
Bearing
8 hours agoCharlie Kirk ♥️
24.5K48