滾動到頁面底部時向下滾動，並向上滾動時順利

Question

我有一個網頁與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; 
    }); 

你能指導我找到更好的方法來成功實現這兩個目標嗎？

Answer 1

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