56

I have an HTML document that currently has some links to the top of the page using an anchor

<body id="topofpage">
   ...
   <a href="#topofpage">Go to top</a>

However, I don't like needing to create a useless id and how the "#topofpage" shows up in the URL after I click the link. Is there something else I can do to link to the top of the page without using Javascript? I tried removing the anchor completely with <a href=""> but that causes the page to refresh.

0

5 Answers 5

97

According to the HTML5 spec the empty fragment # and the special fragment #top will link to the top of the page.

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

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

There is no need to create a matching anchor if you use these special fragment names.

3
  • 20
    The HTML5 spec defines a special fragment "#top" that can be used to link to the top of the document. No need to explicitly define an element with an ID of "top". See Mozilla's href note. May 14, 2015 at 5:46
  • 2
    This answer does answer the original question, however it negatively impacts accessibility. If you tab to either of these links and press enter the next time you tab will take you to the link after the Back To Top links. Whereas if you go with the markup in the original question, tabbing will continue to the link after the destination element. For this reason, I suggest using the markup in the original question.
    – Votemike
    Mar 21, 2018 at 16:32
  • 1
    @Votemike surely this is an accessibility bug in the browser?
    – lofidevops
    Apr 18, 2019 at 10:41
12

You can try using javascript

<a onclick="scroll(0,0)">

Or you can use jQuery

$("#Top").click(function(){
 scroll(0,0);
});
2
  • If I do that it fails if I click on the link with "open in a new tab". Is using Javascript like this really the only way? Also, is the scroll function cross-browser?
    – hugomg
    Aug 1, 2012 at 0:28
  • I wish it did but I don't think this will work across all browsers: developer.mozilla.org/en-US/docs/Web/API/Window/…
    – atw
    Mar 7, 2019 at 10:22
7

I know that you said without using JavaScript, but I think that is really the only way to avoid using a real anchor. The following jQuery will replace anchors with the #top href and perform a nice animated scroll to the top without the URL changing (see the original author's page for more info).

$(document).ready(function() {
    $('a[href=#top]').click(function(){
        $('html, body').animate({scrollTop:0}, 'slow');
        return false;
    });
})

jsfiddle for completeness

However, I would stick with semantic HTML and use anchors for their purpose so that the proper meaning can be interpreted by the maximum number of browsers. Don't forget about people with disabilities that require screen readers or other special browsers. Anchors are guaranteed to work.

In addition to that, Google announced in 2009 some new indexing features that directly take advantage of in-page anchors to provide additional context that the Web searcher might be looking for. In many cases, there might be a section of a page that a user is very interested in. Google can provide a direct link to that anchor of the page for optimum relevance.

Bottom line from my point of view - don't dis the anchors. Use them.

0
2

Another useful way of using the anchor tag to get the top of the page is

<a href='#top'> Go back to the top of the page.</a>

using it like this makes your page automatically scroll to the top of the current page. Hope this is useful to someone.

-5

<a href="?">top</a> will get you there.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.