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

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，因此可以使用它来绑定(bind)事件。这样您就不需要为不同的浏览器编写不同的代码。

您还可以使用 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*/;
  }
});