Question

我正在创建一个小型网站，我想要的是当我调整窗口大小时，滚动条应该上升到所以我写了一个小函数并在<body onresize="resize()">上调用它这是我的函数< / p>

 function resize(){
        $("html, body").animate({
          scrollTop: 0
      }, 600);
            return false;
        }

现在我想要的是好的，但现在我无法向下滚动一下。滚动条会一次又一次地向上，为什么会这样？

Answer 1

我想在评论中回复，但我的声誉还不够高。我建议不要在调整大小时自动滚动到顶部。这是糟糕的用户体验。您应该提供滚动到顶部的选项。一个例子是当窗口调整大小或用户向下滚动时出现的按钮。如果用户单击该按钮，则会将其滚动到窗口顶部。

Answer 2

我找到了答案，所以我必须等到重新调整大小才能将滚动条向上移动

答案是

var resizeId;
$(window).resize(function() {
  clearTimeout(resizeId);
  resizeId = setTimeout(doneResizing, 500);
});


function doneResizing() {
  $("html, body").animate({
    scrollTop: 0
  });
}

<body>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>
  <h1>asd</h1>

scrollTop在jQuery中表现得很糟糕

2 个答案: