How to Make a Back to the Top Link on a Website

Last Updated: July 4, 2023

This article will show you how to make a back to the top link on a website. These can be useful to visitors reading long articles or browsing large pages. Your visitors shouldn't have to scroll all the way to the top.

Steps

Download Article

{"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/17\/Make-a-Back-to-the-Top-Link-on-a-Website-Step-1-Version-3.jpg\/v4-460px-Make-a-Back-to-the-Top-Link-on-a-Website-Step-1-Version-3.jpg","bigUrl":"\/images\/thumb\/1\/17\/Make-a-Back-to-the-Top-Link-on-a-Website-Step-1-Version-3.jpg\/aid2209039-v4-728px-Make-a-Back-to-the-Top-Link-on-a-Website-Step-1-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\">Creative Commons<\/a><br>\n<\/p><p><br \/>\n<\/p><\/div>"}
{"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/27\/Make-a-Back-to-the-Top-Link-on-a-Website-Step-2-Version-3.jpg\/v4-460px-Make-a-Back-to-the-Top-Link-on-a-Website-Step-2-Version-3.jpg","bigUrl":"\/images\/thumb\/2\/27\/Make-a-Back-to-the-Top-Link-on-a-Website-Step-2-Version-3.jpg\/aid2209039-v4-728px-Make-a-Back-to-the-Top-Link-on-a-Website-Step-2-Version-3.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\">Creative Commons<\/a><br>\n<\/p><p><br \/>\n<\/p><\/div>"}

2
Add a HTML anchor just after the ending of the head tag. This is the start of the body code and thus is, by definition, the very top of the page.
```
<a name="top"></a>
```
Advertisement
{"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/77\/Make-a-Back-to-the-Top-Link-on-a-Website-Step-3-Version-3.jpg\/v4-460px-Make-a-Back-to-the-Top-Link-on-a-Website-Step-3-Version-3.jpg","bigUrl":"\/images\/thumb\/7\/77\/Make-a-Back-to-the-Top-Link-on-a-Website-Step-3-Version-3.jpg\/aid2209039-v4-728px-Make-a-Back-to-the-Top-Link-on-a-Website-Step-3-Version-3.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\">Creative Commons<\/a><br>\n<\/p><p><br \/>\n<\/p><\/div>"}

3
Place the following code where ever you want the link to appear. Ideally, near the end of each page or section.
```
<a href="#top">Back to Top</a>
```

Community Q&A

Search

Add New Question

Question

I find this difficult to understand. For example, "open up your HTML file." Where will it be?

Adam Leech

Community Answer

It really depends. Your HTML files are in your server's c-panel, they're also in your code editor on your website.

Thanks! We're glad this was helpful.
Thank you for your feedback.
If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
Yes No

Not Helpful 3 Helpful 7
Question

How do I change the color of my text?

Community Answer

Add this CSS to your Markup: a{ font-family: Times New Roman; color: Red; }

Thanks! We're glad this was helpful.
Thank you for your feedback.
If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
Yes No

Not Helpful 7 Helpful 3
Question

How can I style this link in CSS?

Kabulput

Community Answer

<a href = "#" style = "color: red"> Link Text Here</a>. Here I used inline CSS to change the link's text color from the default to red.

Thanks! We're glad this was helpful.
Thank you for your feedback.
If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
Yes No

Not Helpful 9 Helpful 3

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

Tips

You can replace "Back to Top" text, with whatever you would like it to say.

Thanks
Helpful 0 Not Helpful 0

Submit a Tip

All tip submissions are carefully reviewed before being published

Submit

Thanks for submitting a tip for review!

Log in

How to Make a Back to the Top Link on a Website

Steps

Community Q&A

Tips

You Might Also Like

About This Article

Is this article up to date?

About This Article

Quizzes

You Might Also Like

Featured Articles

Trending Articles

Featured Articles

Featured Articles

Watch Articles

Trending Articles

Explore Categories