back to top link (Full Version)

All Forums >> [Community] >> OutFront Discoveries



Message

d a v e -> back to top link (2/26/2008 16:50:41)

embarrassingly enough i never realised that this was the best way to make a 'back to the top' link to go back to the top of a page...

(courtesy of this thread: http://www.webmaster-talk.com/html-forum/115858-return-to-top-html-code.html )

i always used the old 'name' way when it's so much easier to simply place, for example,

<a href="#wrapper">top</a>

and target an existing id at the top of your page or simply add an id to any existing element at the very top of the page

;)






Starhugger -> RE: back to top link (2/28/2008 17:27:03)

I've mostly just used < a href="#" > using a linked up-arrow GIF, but lately I've wondered about something else. So much material gets copied into pages in MySpace, etc., and they so often wind up snaring linked graphics which use my own bandwidth. I've never been able to find a way to trace which MySpace page they're coming from. At any rate, I was thinking that if I were to include the address of the page in the href address, a click on those up-arrows would at least take them back to my site. I might even benefit from the back-link, although I doubt the Big-G would consider it a quality link. <shrug> More trouble than it's worth maybe.

Starhugger




Tailslide -> RE: back to top link (2/29/2008 2:26:36)

I do this:

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

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




Starhugger -> RE: back to top link (2/29/2008 12:10:01)

I used to do that too, but I found that even when I put the anchor at the top of the Header, it would take it up but drop it down slightly from the very top of the page. Maybe that's because I'm using a FrontPage theme and I couldn't get at the raw code (not without digging around in the hidden files, anyway). When I discovered that just "#" would do the same, I started using that instead.

Starhugger




womble -> RE: back to top link (2/29/2008 17:21:55)


quote:

ORIGINAL: Tailslide

I do this:

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

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




Same here. Never really thought about using an existing element, I suppose really on the off chance that I might rename or remove that element or something. I use the same set-up for toplinks on all my sites, so that's generally the safest thing, I've found.



Donkey -> RE: back to top link (3/4/2008 10:48:02)

I agree, you need your top anchor at the highest point - there is nothing worse than a top link that takes you almost, but not quite to the top of the page.

It is probably considered overkill, but I always use this. 
<p class="top"><a id="top">Top</a> </p>

<a href="#top" title="Link to the top of this page"> Back to Top</a>
And in the CSS 
p.top{
margin: -8px 0 0 0;
background-color: transparent;
visibility: hidden;
}

p.top a{
visibility:hidden;
font-size: 0.1em;
}


I read somewhere that it is better to link to a word rather than an empty anchor.

I always make the anchor the first thing inside the <body> tag, above the container and above any skip links. It works for me.



Starhugger -> RE: back to top link (3/4/2008 11:26:32)


quote:

ORIGINAL: Donkey

I read somewhere that it is better to link to a word rather than an empty anchor.

That's interesting. I'd like to find out more about that. Any idea where you read it, or what context it was in?

quote:

I always make the anchor the first thing inside the <body> tag, above the container and above any skip links. It works for me.

That won't work if you're using a FrontPage theme. With FP, it will only take you to the top of the content, not the top of the page header. Even when I've tried putting the tag into the top-most point I could get to in the header (by placing the cursor directly into the header and then inserting HTML code through a FP Web Component), it still lands about one line down from the top of the page.

SH



Donkey -> RE: back to top link (3/4/2008 13:12:16)

I've no idea where I read that or even if it is correct, it was probably a throwaway remark someone made in a forum. It does work though.

In code view type it just below the opening body tag.

So it looks like this. 
<body>
<p class="top"><a id="top">Top</a></p>


That should work, although I haven't used frontpage themes so I stand ready to be corrected by an expert.

Alternatively you can move it up the page by increasing the negative top margin (or technically decreasing it).
e.g
p.top{
margin: -15px 0 0 0;
}



caz -> RE: back to top link (3/4/2008 13:48:01)

Sometimes returning to the top of the content makes more sense to the reader, especially if you have good content and a decorative only header.



Starhugger -> RE: back to top link (3/4/2008 13:49:02)

Hmmm... Okay, well I tried to test it to prove you wrong, but it turned out okay. (I hate it when that happens... [>:] ) But it wasn't taking me to the top of the page when I tried it ages ago, honest! LOL

SH



Starhugger -> RE: back to top link (3/4/2008 13:50:36)

quote:

ORIGINAL: caz
Sometimes returning to the top of the content makes more sense to the reader, especially if you have good content and a decorative only header.

In my case, I have my navigation there too.

SH



womble -> RE: back to top link (3/4/2008 15:29:08)


quote:

ORIGINAL: caz

Sometimes returning to the top of the content makes more sense to the reader, especially if you have good content and a decorative only header.


That's what I usually do, especially if my header's only got the page title in it (usually hidden from view by using image replacement if I've used a decorative font). I usually use skip links right up at the very top of the page to skip to either the navigation, content, or sidebar if I'm using one though.



caz -> RE: back to top link (3/4/2008 18:36:52)

I do too - skip links that is and as the content anchor is already defined then that's where the back-to-top links lead to if needed. Of course if your navigation is not visible like that then you must do otherwise.



jaybee -> RE: back to top link (3/4/2008 20:21:34)

quote:

<p class="top"><a id="top">Top</a></p>


It does work but it turns the word TOP into an anchor, so when you hover over it it changes colour or underlines or whatever you do to distinguish links, which can confuse visitors into thinking clicking it takes them somewhere when it doesn't.

If you then apply the css to make it invisible the way Donkey has, that's fine but if you decide to use the first word of your first paragraph as an anchor then you have a problem.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625