Anchors only work down?

How to set up a "back to top" link

[LABachlr]

I'm setting up a long page listing items, and would like to be able to insert links entitled "back to top" where the visitor can click on it and go back to the top of the list. But, I don't want them to go all the way to the top of the page, just to the top of the list.

However, I have tried setting up an anchor named "top" at the top of the list, but when I make a link to it from farther down the page, when one clicks on the link, it doesn't go anywhere. The only way I could get it to go back to the top was to link the "back to top" links to the name of the page, in which case it brings it to the very top of the page.

Do anchors only work when you want to go "down" the page?

How can I link it so that it goes back up to the top of the list, but not to the very top of the page?

[jbinbpt]

Under these posts next to global options is "top of page" that works fine.
At the top of the code

<a name="home">

From where you want to jump

<a href="#home">top of page</a>

[pageoneresults]

<a name="home">
From where you want to jump
<a href="#home">top of page</a>

Make sure your <a name="home"></a> is inside the block element where you want the user to end up. For example, here is an ordered list at the top of the page. I'm going to put the user right back to the top of the ordered list with this...

<ol><a name="home"></a>
<li></li>
<li></li>
<li></li>
</ol>

If you are writing valid html, the named anchor needs to be within a block level element or it won't validate.

Another example of the above with a preceding <h> tag...

<h1><a name="home">My Ordered List</a></h1>
<ol>
<li></li>
<li></li>
<li></li>
</ol>

[MonkeeSage]

You don't need an actual anchor tag (<a>) to use the "scroll-to-anchor" functionality. Just set a name or id attribute on an arbitrary element...

<h1 name="top" id="top">Main page heading</h1>

Then "#top" will bring you to that element.

Jordan

[LABachlr]

I'm using Dreamweaver MX, and when you click on the anchor button, it creates the following tag when you name the anchor "top":

<a name="top" id="top"></a>

I switched it to <a name="top"></a> and it worked!

Thanks!

[MonkeeSage]

Just FYI, the name and id attributes share the same namespace in the DOM (since HTML 4), so if one worked and the other didn't, I start to wonder about the browser.

Jordan

[LABachlr]

But do they work at the same time? As you can see in my post, the name and ID attributes were used in the same tag. Apparently, it didn't like that.

I'm using IE6 SP1.

[MonkeeSage]

They are supposed to work at the same time; W3C actually recommends using both (with the same value) to ensure legacy browser compatibility in case some old browser only supports one or the other.

This works for me in IE6 sp1,

<div id="top" name="top">#top
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div id="middle" name="middle">#middle
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div id="end" name="end">#end</div>

I type in the address bar (on the end of the url): #top or #middle or #end and it scrolls to that element.

Mabye you accidentally had multiple elements with the same id or name attribute or something like that?

Jordan

[LABachlr]

Very bizarre.

I put it back to having both of them:

<a name="top" id="top"></a>

and it worked. I did double-check it before I started to experiment. Wonder what caused it. And since I put the two attributes in a different order than you, Jordon, it obviously doesn't matter which order it goes in. But I pretty much knew that anyway as that is how HTML is.

I don't think I had multiple attributes, as it was just one at the top. Not sure what the deal was.

Again, before, when I would click on "back to top", it wouldn't go anywhere, and I made sure that the links were correct, as that is usually how it acts when there is an bad anchor link.

Thanks, though.

[LABachlr]

I found out what was causing it. I have a very large table on the page that has 5 columns. The very top row I had converged so that it was only 1 column, while all of the other rows had 5 columns. For some reason, the anchor would not work when it was in the row with only one column. When I split that row back up into 5 columns like all of the other rows, the anchor worked again. Weird.