Jump to top of the page link on long pages

Question

Hello,

I need an advice on how to add "Go to top" link on the bottom of the page, but only when the page is longer than the browser window size.

The algorithm would be:

• check the page height
• calculate the footer and header height
• compare the sizes
• find last element before footer (e.g. by id)
• insert link to #top-menu

(Assuming pure JavaScript, working in IE6 too. I don't want to use any JS library.)

Answer 1

Hmm... I'm thinking detecting body.scrollTop != 0, then this means the page is higher than the browser's viewport. I would make the "Go to top" element always part of the page, but its visible status would depend on whether body.scrollTop != 0. To detect whether body.scrollTop != 0, you would need to poll its value every 100ms say, and whether it is zero, set the display property of your "Go to top" object to '' or 'none'.

There might be a bit of an annoyance though, as the "Go to top" element itself adds to the overall page height. In such case, using the 'visibility' property instead of 'display' might be a better choice.

EDIT: Just found this link, might be useful if you go with the above.