ScrollTop()函数,滚动时间
问题描述:
当调用函数时,页面向上滚动,但只要动画时间设置为,就需要等待,以便能够再次向下滚动。例如,如果我说ScrollTop()函数,滚动时间
$('html, body').animate({ scrollTop: 0 }, 800);
这让我等一会才能再次向下滚动,但如果我写
$('html, body').animate({ scrollTop: 0 }, 10);
它滚动起来速度快了很多,但我将能够立即再次向下滚动!我怎样才能使用800
(所以动画比较酷),但是避免再次等待滚动?
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('.goToTop').fadeIn();
} else {
$('.goToTop').fadeOut();
}
$('#goToTop').click(function() {
$('html, body').animate({ scrollTop: 0 }, 800);
return false;
});
});
答
您可以用下面的代码停止任何正在进行的动画。
$('html,body').stop();
编辑:只有当滚动是由人类触发时,动画才会停止。下面有一个工作小提琴https://jsfiddle.net/sjp3xngo/4/
答
你需要写.animate()
,以降低回其早先的立场,滚动(其中滚动窗口顶部的一个)的回调函数内部setTimeout
功能。工作小提琴here。
$(document).ready(function(){
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('#goToTop').fadeIn();
} else {
$('#goToTop').fadeOut();
}
});
var duration_ms = 800;
$('#goToTop').click(function() {
var last_scroll = $(window).scrollTop();
$('html, body').animate({ scrollTop: 0 }, duration_ms, function(){
\t setTimeout(function(){
\t $('html, body').animate({ scrollTop: last_scroll }, duration_ms);
\t }, duration_ms);
});
});
});
#goToTop{
cursor: pointer;
display: none;
position: fixed;
bottom: 15px;
right: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre>
a
b
c
d
q
w
e
r
t
y
u
i
o
p
a
s
d
f
g
h
j
k
l
z
x
c
v
b
n
m
<span id="goToTop">go to top</span>
</pre>
您可以添加,将800毫秒之后被调用做任何你想在那个时候的setTimeout(FUNC(){},800)。 – fmacdee