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

因此，目前我在页面加载上运行一些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*/;
    }
}

if（window.addEventListener）{//Mozilla、Netscape、Firefox
addEventListener（'load'，windowLoad，false）；
}else如果（window.attachEvent）{//IE
window.attachEvent（'onload'，windowLoad）；
}
函数windowLoad（事件）{
//将“最小高度”设置为“视口高度”
if（/*页面元素高度*/<$（窗口）.height（））{
$（“.content”）.css（'min-height'，$（window.height（）-/*页面元素高度*/；
}
}

---

问题是，即使在一个相当快的连接上，也会有一个明显的跳转，页脚最初就在内容下方，然后跳转到页面底部。有什么办法解决这个问题吗？

既然您已经在使用jQuery，您可以用它来绑定事件。这样，您就不需要为不同的浏览器编写不同的代码

您还可以使用

ready

事件，而不是

load

事件，后者发生在页面加载过程的早期。

ready

事件是

DOMContentLoaded

事件上的跨浏览器版本，其中jQuery为不支持它的浏览器（即IE）模拟事件

$（文档）.ready（函数（）{
//将“最小高度”设置为“视口高度”
if（/*页面元素高度*/<$（窗口）.height（））{
$（“.content”）.css（'min-height'，$（window.height（）-/*页面元素高度*/；
}
});

你可能想用谷歌搜索“css sticky footer”，因为我认为这是你想要的，而且有很多更干净的解决方案（这里有一个兼容性很好的例子：）。如果你仍然想使用JS，那么你可以将页脚的不透明度设置为零，然后在第一次设置最小高度后淡入。

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