Scroll to top js

How to make an element with

position :absolute;
left: 50%;
bottom: 0;

like a scroll top button

show only when the user scrolled to bottom of the page? if scroll a lit up then hide?

I think with

bottom: -100%; when user not scrolled bottom and set
bottom: 0; when is scrolled down.

Any idea?

Why not just put it all the way on the bottom of the page in the footer?

I wanna be creative where I can

You need Javascript.

Detect how many pixels the page was scrolled down from top.
Then add a class to your button when you want to show it, and when to hide it.