如何打开带autofocus表单的featherlight.js模态框时阻止页面滚到底部？

这个问题我之前也碰到过，本质是浏览器对autofocus属性的默认行为在作祟——当页面中有带autofocus的元素时，浏览器会自动滚动到该元素的位置，而你的模态框代码刚好在页面底部，所以就出现了打开模态框就滚到底部的情况。下面给你几个可行的解决办法：

方法一：手动设置焦点并恢复滚动位置（兼容所有浏览器） #

首先把表单输入框上的autofocus属性删掉，然后利用Featherlight的回调函数来处理：

// 假设你的触发按钮类是modal-open-btn，根据实际情况修改
$('.modal-open-btn').featherlight({
  afterOpen: function() {
    // 记录打开模态框前的页面滚动位置
    const originalScrollPos = $(window).scrollTop();
    // 给表单第一个输入框设置焦点
    this.$content.find('input:first').focus();
    // 强制页面滚回原来的位置
    $(window).scrollTop(originalScrollPos);
  }
});

这个思路很直接：先记住用户原来的滚动位置，设置焦点后（此时浏览器可能已经滚动了），再把页面拉回去，用户完全感知不到这个过程。

方法二：用focus的preventScroll参数阻止滚动（更优雅） #

同样先移除输入框的autofocus属性，然后在回调里使用focus({ preventScroll: true })来告诉浏览器聚焦时不要滚动页面：

$('.modal-open-btn').featherlight({
  afterOpen: function() {
    this.$content.find('input:first').focus({ preventScroll: true });
  }
});

这个方法更简洁，不过要注意preventScroll是ES6之后的API，现代浏览器都支持，但如果你的项目需要兼容IE这类旧浏览器，还是优先用方法一。

方法三：调整模态框HTML的位置（最简单的结构调整） #

如果你的页面结构允许，直接把包含表单的模态框代码从页面底部移到<body>标签的开头附近。这样就算浏览器因为聚焦滚动，也是滚到页面顶部，用户基本不会注意到这个小变化，实现成本最低。

内容的提问来源于stack exchange，提问作者Donny