In above HTML code I have just added simple HTML button with id and onclick event handler. Which is just basic HTML code. Now, let’s add some CSS style to set the button’s position on different page movements.
Similarly, I am setting the right property so set the button on a proper position on a page. Button’s z-index property is 99 because I don’t want it to overlap with any other elements and be in front of all the elements, clearly visible. I have removed border and outline but you can keep it to give the button a different look, it’s up to you.
I’ve set the color and background-color properties as per the color combination of my pages so that’s up to you to decide what color you should go for. Also for, padding, border-radius and font-size, you can choose your own style. I have added cursor property as a pointer to add a mouse pointer on hover. Also, I am changing the color of the button on mouse hover.
What we need is one more function to tell the browser to go to top position on the page. For that we are using button’s onclick event and calling a function GoTopFunction and setting the same document.body.scrollTop to 0px aka to the top of the page.
go to top scroll