我可以知道我的页面在呈现之前是否会有滚动条。 PHP Javascript

时间:2011-07-07 01:44:36

标签: php javascript

我的header.php<a name='#top' />

我有一个footer.php,我想做一些像

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

是否可以使用PHP或Javascript来做这样的事情,在那里我可以知道我的页面是否会在渲染时间之前很长时间?

4 个答案:

答案 0 :(得分:4)

首先,我不确定这些代码的实用性。我永远不会确定“回到顶部”或“跳到顶部”链接会做什么:

  • 它会将我发送到页面顶部吗?
  • 它会把我送到顶部下面的锚点吗?
  • 它会带我到顶部的吗?
  • 它会重新加载(叹气)吗?

知道按下Home键会做什么,但我怀疑大多数人宁愿使用本机控件导航页面。

尽管如此,一旦页面加载,您可以通过在页面调整大小上设置事件处理程序来动态切换这种类型的链接:

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;

不同的浏览器 - 我的意思是IE与其他人一样 - 有自己的寻找高度的方法,所以上面说的那个,可能有些多余。

答案 1 :(得分:3)

使用PHP是不可能的,甚至不尝试。使用JavaScript,例如:

if(document.body.scrollHeight > window.innerHeight){
    // show scroll-to-top link
}

答案 2 :(得分:0)

没有。如果没有浏览器首先呈现它,就无法用任何语言进行识别。

答案 3 :(得分:0)

是的,但我建议使用JavaScript而不是PHP。此外,要获得页面的实际大小,必须首先在浏览器中呈现内容。

<a href='#top' id="back" style="display:none;">Back to Top</a>

将此JavaScript代码段放在页面底部或DOMready回调函数中:

<script type="text/javascript">
    var backAnchor = document.getElementById('back');

    if (document.body.scrollHeight > window.innerHeight) {
        backAnchor.styles.display = 'none';
    }

</script>