如何用JavaScript或jQuery让表单滚动到视图并重置至顶部？

嘿，我明白你的困扰——每次打开那个筛选层，都想让它从最顶部开始显示，而不是停留在上次滚动的位置对吧？你的scrollIntoView没生效，大概率是因为元素显示的时机和滚动操作的时机没配合好，咱们来搞定它！

问题出在哪？ #

你现在的代码里，是先toggle切换显示状态，紧接着就调用scrollIntoView，但浏览器切换元素的显示/隐藏是异步的——也就是说，当你调用scrollIntoView的时候，元素可能还没真正显示出来，自然就不会生效。另外，scrollIntoView的默认参数也不一定能完全满足“强制回到顶部”的需求。

两种靠谱的解决方案 #

方案1：直接重置滚动位置（最稳妥） #

直接操作元素的scrollTop属性，把它设为0，这是最直接可靠的方式。需要注意的是，要确认筛选层是处于显示状态时再执行这个操作：

$("#filter_button").on("click", function(){
  $("#filter_box").toggle();
  
  // 检查筛选层是否已经显示出来
  if (!$("#filter_box").is(":hidden")) {
    // 如果滚动容器是filter_box本身，就用这个
    $("#filter_box").scrollTop(0);
    // 如果是form内部滚动，就换成下面这行
    // $("#myform").scrollTop(0);
  }
});

方案2：优化scrollIntoView的调用时机 #

如果你更倾向于用scrollIntoView，那就要把滚动操作放在toggle的回调函数里，确保元素已经完成显示/隐藏的切换后再执行，同时指定明确的参数来强制顶部对齐：

$("#filter_button").on("click", function(){
  $("#filter_box").toggle(function() {
    // 这个回调会在toggle动画/状态切换完成后执行
    if (!$(this).is(":hidden")) {
      $("#myform")[0].scrollIntoView({
        behavior: "instant", // 立即滚动，不需要动画
        block: "start"      // 强制元素顶部与容器/视口顶部对齐
      });
    }
  });
});

小提示 #

• 先搞清楚你的滚动容器是谁：如果是整个#filter_box滚动，就给它设scrollTop(0)；如果是#myform内部滚动，就操作#myform；
• 用toggle的回调函数能完美避开“元素还没显示就执行滚动”的问题，这是很多人容易忽略的点。

试试上面的方案，应该就能让你的筛选层每次打开都乖乖回到顶部啦！

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