Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make a back-to-top button using CSS and HTML only?

Tags:

html

css

I'm trying to do a back to top button but to scroll down and up to a certain point on the page. For instance you have a long text and you want to bring the user to the next paragraph by simply having them to click on a link... I've done it in the past but I can't remember how I did it for the life of me...

like image 265
Bic Mitchun Avatar asked Aug 19 '15 18:08

Bic Mitchun


People also ask

How do you code back to the top in HTML?

Utilize the <a> tag. At the top of your website, put an anchor with specified name. Then your "back to top" link points to it.

How do you make a button on top in CSS?

Just add position:absolute; top:0; right:0; to the CSS for your button.


2 Answers

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/

like image 170
markasoftware Avatar answered Sep 20 '22 02:09

markasoftware


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> 
like image 41
user2867288 Avatar answered Sep 21 '22 02:09

user2867288