Question

I have a header.php which has my <a name='#top' />

and I have a footer.php which I want to do something like

if ($_SERVER[' is scroll bar ']
{
  echo <a href='#top'>Back to Top</a>
}

is it possible with PHP or Javascript to do something like this, where I can know if my page is going to be very long ahead of render time?

Answer 1

First off, I’m unsure of the practical usefulness of such code. I’m never really certain what a “back to top” or “jump to top” link will do:

• Will it just send me to the top of the page?
• Will it send me to some anchor below the top?
• Will it take me to the top page?
• Will it reload (sigh)?

I do know what pressing the Home key will do, though, and I suspect most people would rather navigate a page using native controls if possible.

Nonetheless, once the page is loaded, you could toggle that kind of link dynamically by setting up event handlers on page resize:

var toTopLink = document.getElementById("toTopLink");

function checkLink(e) {
  /*
   * document.height                       = works in most browsers
   * document.body.scrollHeight            = needed in IE
   *
   * window.innerHeight                    = works in most browsers
   * document.documentElement.offsetHeight = IE in compatibility mode
   * document.body.offsetHeight            = IE backwards compatibility
   *
   * In most browsers, document.height equals window.innerHeight if there is no
   * scrollbar. For IE, we test whether the scrollable height is greater than the
   * visible document height.
   */
  if ((document.height || document.body.scrollHeight) >
        (window.innerHeight || document.documentElement.offsetHeight ||
         document.body.offsetHeight)) {
    toTopLink.style.display = "block";
  } else {
    toTopLink.style.display = "none";
  }
}

window.onresize = checkLink;
window.onload = checkLink;

Different browsers — by which I mean IE versus everyone else — have their own ways of finding height, and so the above accounts for that, maybe somewhat redundantly.