Question

我有一个网页，其中包含2个堆叠的div，每个div的高度为100vh。我有两个目标：

当用户向下滚动时，浏览器必须一直向下滚动到第二个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;
  });

我尝试过以下代码，但它有两个问题。首先，向下滚动动画的速度非常缓慢，因此会让用户感到困惑。其次，由于某种原因，一旦浏览器滚动到页面底部，它就会卡在那里，永远不会再回来。

  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 个答案: