scrollTop 在 jQuery 表现疯狂
scrollTop is acting crasy in jQuery
我正在创建一个小型网站,我想要的是当我调整 windows 大小时滚动条应该升到顶部所以我写了一个小函数并在 <body onresize="resize()">
这是我的功能
function resize(){
$("html, body").animate({
scrollTop: 0
}, 600);
return false;
}
现在我想要的是好的,但现在我不能向下滚动一些 times.the 滚动条一次又一次地向上滚动,这是为什么
我想在评论中回复,但我的声誉还不够高。我建议不要在调整大小时自动滚动到顶部。这是糟糕的用户体验。您应该提供一个滚动到顶部的选项。一个例子是当 window 调整大小或用户向下滚动时出现的按钮。如果用户单击该按钮,它会将它们滚动到 window.
的顶部
好吧,我找到了答案,所以我必须等到调整大小完成才能向上移动滚动条
答案是
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>
我正在创建一个小型网站,我想要的是当我调整 windows 大小时滚动条应该升到顶部所以我写了一个小函数并在 <body onresize="resize()">
这是我的功能
function resize(){
$("html, body").animate({
scrollTop: 0
}, 600);
return false;
}
现在我想要的是好的,但现在我不能向下滚动一些 times.the 滚动条一次又一次地向上滚动,这是为什么
我想在评论中回复,但我的声誉还不够高。我建议不要在调整大小时自动滚动到顶部。这是糟糕的用户体验。您应该提供一个滚动到顶部的选项。一个例子是当 window 调整大小或用户向下滚动时出现的按钮。如果用户单击该按钮,它会将它们滚动到 window.
的顶部好吧,我找到了答案,所以我必须等到调整大小完成才能向上移动滚动条
答案是
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>