Link to top

Intro

In HTML, it’s possible to create a link that takes you to the top of a webpage.

Steps

Create paragraph elements

We need to add enough text to the page so that a scrollbar appears and the link to the top will actually have an effect. Type p and press Tab to generate a paragraph element. Then type lorem inside the paragraph tags and press Tab to generate lorem ipsum text.

<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates odit in molestias saepe est rem iusto accusantium omnis ad eligendi? Eos rerum saepe reiciendis magni fugit enim quasi, exercitationem quos.</p>

Copy and paste this paragraph element until you have 10 paragraphs on the page. Then make your preview very narrow so that a scroll bar appears.

Create anchor element

After the last paragraph, type a and press Tab to generate an anchor element.

<a href=""></a>

Type #top for the href value and Back to top for the link text.

<a href="#top">Back to top</a>

Try scrolling down in the preview and then clicking the link at the bottom to go back to the top.

Other method

Now try deleting the word top and just leaving a hashtag.

<a href="#">Back to top</a>

Try scrolling down in the preview one more time and then clicking the link at the bottom to go back to the top. This is another way of creating a link back to the top. Both ways are valid. I prefer the first way, but you can use either way.

Final code

Here is the code that should be in between the body tags.