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

Correct way to avoid element jumping to bottom of page?

本文关键字：底部 方法 元素      更新时间：2023-09-26

所以目前我在页面加载时运行一些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*/;
    }
}

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

由于你已经在使用 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*/;
  }
});
相关文章：