Creating a custom floating button

A floating button is simply a button that floats above the page in a fixed position while the page is scrolling. Why would we want this?

In our case, we're going to create a button that quickly takes the user to the top of the page rather than having them manually scroll back up. Many websites make use of something like this as it saves the user's time and effort to scroll through long pages.

Our action plan is going to look like this:

1. Create the Back to top button and set its Position to Fixed.
2. When the user clicks on the button, it will take the user back to the top of the page.
3. Hide the button when the user is at the top of the page.
4. Show the button when the user scrolls down to a certain position on the page.
5. When the user hovers over the button, make it react in some way so that it stands out.

The following diagram shows the floating button we'll be creating, along with what the hover effect...