2016-12-04 142 views
0

我有一个网页与2个堆叠的div与100vh高度每个。我有2个目标:滚动到页面底部时向下滚动,并向上滚动时顺利

  1. 当用户向下滚动时,浏览器必须一直滚动到第二个div的底部。当用户向上滚动时,向上滚动到第一个div的顶部。实质上,我只想要允许两个滚动位置(文档的顶部和底部)。
  2. 我希望滚动动画,以便在向上/向下移动时感觉平滑。这里

    <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; 
    }); 

你能指导我找到更好的方法来成功实现这两个目标吗?

+0

我想这是在其他情况下'scrollTop的一个错字( “超大屏幕 ”)$'它不应该是'scrollTop的:$(“ 超大屏幕”)偏移( ).top'? – Viney

+0

谢谢,实际上我错过了添加.offset()顶部 但是,问题仍然存在,当我尝试向上滚动时,滚动位置卡在第二个div的底部。 – Andrew

回答

0

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; 
    }); 
+0

谢谢,实际上我错过了添加.offset()顶部 但是,问题仍然存在,当我尝试向上滚动时,滚动位置卡在第二个div的底部。 此外,重新制定动画的时间不是动画完成所需的时间,而是触发动画(检测到滚动事件)和动画开始之间的延迟时间。 – Andrew

+0

那么你得到的值是错误的,console.log所有的值(st,lastScrollTop,$(“。jumbotron”)。offset()。top)检查你得到的值是什么,我想你会发现那1值不是你所期望的。 –