滚动到页面底部时向下滚动,并向上滚动时顺利
我有一个网页与2个堆叠的div与100vh高度每个。我有2个目标:滚动到页面底部时向下滚动,并向上滚动时顺利
- 当用户向下滚动时,浏览器必须一直滚动到第二个div的底部。当用户向上滚动时,向上滚动到第一个div的顶部。实质上,我只想要允许两个滚动位置(文档的顶部和底部)。
- 我希望滚动动画,以便在向上/向下移动时感觉平滑。这里
<div class='jumbotron' style='height:100vh;'></div> <div class='content' style='height:100vh;'></div>
我第一次尝试
标记实现了第一个目标,但不是第二个用下面的代码。
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
$(window).scrollTop(1000);
}
else {
$(window).scrollTop(0);
}
lastScrollTop = st;
});
我试过下面的代码,但它有2个问题。首先,向下滚动动画的速度非常缓慢,因此会让用户感到困惑。其次,由于某种原因,一旦浏览器滚动到页面的底部,它就会停留在那里,永远不会恢复。
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
$('html, body').animate({
scrollTop: $("#displayed-text").offset().top
}, 2000);
}
else {
$('html, body').animate({
scrollTop: $(".jumbotron").offset().top
}, 2000);
}
lastScrollTop = st;
});
你能指导我找到更好的方法来成功实现这两个目标吗?
scrollTop获取一个数字并滚动到页面上的那个数字,在第二个动画中,你给scroolTop一个jquery对象= $(".jumbotron")
,你应该像上面那样做offset()。top返回一个数字,给定div顶部的位置。 so $(".jumbotron").offset().top
。
此外,您将动画设置为2秒,这意味着您想要的动画(从上到下,从下到上移动)需要2秒才能完成,如果您希望速度更快,您需要玩您传递给.animate()的第二个参数,以毫秒为单位,1000 = 1秒。
更新代码:
var lastScrollTop = 0;
var animationTime = 2000; //play with that number to get the right speed you want
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
$('html, body').animate({
scrollTop: $("#displayed-text").offset().top
}, animationTime);
}
else {
$('html, body').animate({
scrollTop: $(".jumbotron").offset().top
}, animationTime);
}
lastScrollTop = st;
});
谢谢,实际上我错过了添加.offset()顶部 但是,问题仍然存在,当我尝试向上滚动时,滚动位置卡在第二个div的底部。 此外,重新制定动画的时间不是动画完成所需的时间,而是触发动画(检测到滚动事件)和动画开始之间的延迟时间。 – Andrew
那么你得到的值是错误的,console.log所有的值(st,lastScrollTop,$(“。jumbotron”)。offset()。top)检查你得到的值是什么,我想你会发现那1值不是你所期望的。 –
我想这是在其他情况下'scrollTop的一个错字( “超大屏幕 ”)$'它不应该是'scrollTop的:$(“ 超大屏幕”)偏移( ).top'? – Viney
谢谢,实际上我错过了添加.offset()顶部 但是,问题仍然存在,当我尝试向上滚动时,滚动位置卡在第二个div的底部。 – Andrew