Can we use just <a href="#"> for "back to top" button at bottom of the page?

Question

Can we use just <a href="#"> for "back to top" button at bottom of the page? I think it will work always in all browser. We do need to define any ID .

When we click on this <a href="#"> it takes to page top always. or what are other best practices to use "back to top" button.

Solution 1

Yes, you can and should use that, as that is what it means. There are no other practices for doing a 'back to top' button, and even if there is, they're unnecessarily complicated compared to this.

Solution 2

I don't think using just '#' is good. It's not very meaningful for the user.

You don't need to define an extra id just to use it to snap back to the top of the page. It's much better to use an existing element on the page. For example, if you have a logo on top of the page, you can assign the <img> tag the id of 'top':

<img src="logo.png" id="top">

At the bottom of the page, you can then use this element id to go to the top of the page:

<a href="#top" title="Go to top of page">Go to top of page</a>

This will produce http://www.mysite.com/#top which will be more meaningful for your visitors.

Comments

[Anthony Forloney]

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

[Jitendra Vyas]

<a href="#" title="Go to top of page" >Go to top of page</a> in a much better way.

[Maroš Beťko]

I would say this is the worst option since it reloads the page which is not what you want in this case.