Question

I have an image that, when clicked I’d like to take the user to the top of the page (it’s a “back to top” link.)

I have linked the image using an ID to my ‘navigation’ div using the code below, as I have been told is the correct way to do so, but it does nothing.

Live site

HTML

<div id="navigation">
     stuff in here
</div>

and

<!-- Back to top link -->
  <div class="bottom">
    <a href="#navigation">
      <img src="images/back_top.png" />
    </a>
  </div>

This doesn’t seem to do anything though, I thought the name attribute was deprecated and thus id’s should be used instead but this doesn’t do anything?

Answer 1

Since your #navigation element is positioned with position: fixed it is always on screen. You need to link to an element that will stay at the top of the document.

You could add in another element, or add an id to the body. Alternatively, change the position of the navigation so it stays in flow. Or, you could use JavaScript to animate a scroll to the top (e.g. with jQuery .animate and the scrollTop property).