How to make a back-to-top button using CSS and HTML only?
Utilize the <a>
tag.
At the top of your website, put an anchor with specified name.
<a name="top"></a>
Then your "back to top" link points to it.
<a href="#top">back to top</a>
What you would want to do is put an "anchor" at the top of the page, using an <a>
tag (it's not JUST useful for links!). Then, when you have a link that goes to #nameofanchor
, it scrolls to the anchor with that name. You'd do it like this:
<a id="top"></a>
<!--content here-->
<a href="#top">Back to top</a>
Here is a working jsfiddle: http://jsfiddle.net/qf0m9arp/1/
<a href="#">Start of page</a>
"The link has the href value of "#", which by definition means the start of the current document. Thus there is no need to worry about the correct way of setting up the destination anchor..."
Source