Scroll to top button is a very common UX feature in websites. It's goal is to prevent annoying users forced to scroll back up - especially on mobil...
For further actions, you may consider blocking this person and/or reporting abuse
The most minimalist
scroll-to-top. (Rookie)Thanks for the feedback Loouis 😄!! This is indeed a minimal scroll to top implementation. It's perfect for rookies like u said.
I just want to note that scroll-behavior support is still not optimal caniuse.com/#search=scroll-behavior
And I was thinking of a button that would only appear after a certain amount of scroll and that is not attached to the flow of the page.
But thanks for the insight, I didn't think of this method 😁. Those who want to have a scroll to top with no js would love it!
Why using javascript when you can use only html and css ?
Salut Corentin, maybe because I don't know yet how to do it without js 😅😅. But I'll look up on that. Thx for leaving a comment!
No problem :)
Smooth scroll (example here) is not yet implemented in Safari and some mobiles browsers, so it must be a good reason to keep using js for a couple more months.
Setting display: none removes the button. So you can't click on it.
Setting opacity keeps the button in place and you can interact with it. You can see this in the last example with the display scrolled to the top. Hover the cursor over the location of the button. Note how the cursor changes to a hand shape.
If you happen to have a link under the button the user can't click on it. If the user happens to click on that location (say to interact with a link or highlight text), it will jump to the top of page.
You have to do more than just set opacity to make this non-confusing for a user. I realize this tutorial is meant for beginners, but these are things that a beginner should have brought to their attention so they don't have to unlearn it in the future. Implementation can be left as an exercise for the reader 8-).
Hey John, thx for the precious feedback! I didn't notice that the button was still inside the page 😅. I've increased the translate value from 50 to 100px because it's at 50px from the bottom and its height is 35px so by translating 100px down it's completely out of the screen. Thx again for taking your time to explain this flaw 😁!!!
Nice, thanks for sharing! I was recently wondering about adding a "scroll to top" button on my portfolio site vs. making my header "sticky". On the one hand, it would be nice to add some JS to my site to show that I can incorporate it, but on the other hand, using a sticky header would probably be better performance-wise (which may not matter on my simple portfolio website).
What do you think?
Hey Cory, thanks for reading 😄!! You can definitely use both. I kinda understand why you you want to choose between them. Having a sticky header might make a scroll to top button a bit redundant. But I believe it's ok to use them together especially if the page is kinda long. And btw, I don't think this would create a performance issue. Let's chat on Twitter 🙂!
Very helpful thank you!
Thx for the support buddy 😀😊!! I hope I was clear enough. Don't hesitate to tell me if u'd like me to explain sth 👌.
I really enjoy your tutorials. They are very well documented and cover all the details. Nice work.
Thx a lot Madeline ❤, I still make plenty of mistakes 😇.
Nice work, ljc! I learned a lot of neat tricks and tips about scroll properties. Thanks for sharing!
Much welcome James, thx for reading 😊😊!!