向下滚动时滚动到页面底部，平滑向上滚动时滚动到页面顶部

Question

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

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

您能否指导我找到成功实现这两个目标的更好方法？

Answer 1

scrollTop获取一个数字并滚动到页面上的该数字，在第二个动画中，您给scroolTop一个jquery对象= $(".jumbotron") ，您应该执行与上述相同的操作offset（）。top，然后返回一个数字，即给定div顶部的位置。 因此$(".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;
  });