Question

所以目前我在页面加载时运行一些Javascript，如果页面内容短于页面总页数，则将网页页脚div移动到页面底部。

看起来像这样：

if (window.addEventListener) { // Mozilla, Netscape, Firefox
    window.addEventListener('load', windowLoad, false);
} else if (window.attachEvent) { // IE
    window.attachEvent('onload', windowLoad);
}

function windowLoad(event) {
    //Set min-height to viewport height
    if (/*Page elements height*/ < $(window).height()) {
        $(".content").css('min-height', $(window).height() - /*Page elements height*/;
    }
}

问题在于，即使连接速度相当快，也会出现明显的跳转，其中页脚最初位于内容之下，然后跳转到页面底部。有任何想法如何解决这个问题？

Answer 1

当您使用jQuery时，您可以使用它来绑定事件。这样，您就不需要为不同的浏览器使用不同的代码。

您还可以使用ready事件代替load事件，该事件发生在页面加载过程的早期阶段。 ready事件是DOMContentLoaded事件的跨浏览器版本，其中jQuery为不支持它的浏览器（即IE）模拟事件。

$(document).ready(function(){
  //Set min-height to viewport height
  if (/*Page elements height*/ < $(window).height()) {
    $(".content").css('min-height', $(window).height() - /*Page elements height*/;
  }
});

正确的方法避免元素跳到页面底部？

1 个答案: