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 😁!!!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
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 😁!!!