在div之間滾動 - jQuery

Question

我正在新網站上工作，全部在一個頁面中。

現在我有稱爲「家」的主要div，和另一個頁面的稱爲「colordiv」的div。 現在我正試圖通過上下滾動來切換div。 這是我的html：

<div id="home" class="home_div"> 
     //here home page code 
    </div> 

    <div id="color1" class="color_div" style="background-color:#253412;"> 

    </div> 

    <div id="color2" class="color_div" style="background-color:#956341;"> 

    </div> 

，這是我的jQuery代碼：

$("document").ready(function() { 

    $('#learnMbtn').click(function(){ 

     $('html, body').animate({ 
      scrollTop: $("#color1").offset().top 
     }, 600); 

    }); 

    var lastScroll = 0; 
    var temp = $("div.color_div"); 
    $(window).scroll(function(event){ 

     //Sets the current scroll position 
     var st = $(this).scrollTop(); 

     //Determines up-or-down scrolling 
     if (st > lastScroll){ 
      $('html, body').animate({ 
       scrollTop: temp.offset().top 
      }, 600); 
      temp = temp.next(); 
     } 
     else { 

     //here the scroll up code(prev) 

     } 

     //Updates scroll position 
     lastScroll = st; 
    }); 

}); 

，這不適合我的工作，我不知道該怎麼做向上滾動的代碼，你能幫我？

Answer 1

var temp = $("div.color_div");這意味着臨時變量將獲得一系列元素，其中classname具有color_div。

所以，你使用下面的temp.offset().top，jQuery沒有得到當前的offset().top。

如果.color_div有ID喜歡#color1 #color2 or #colorN，也許你可以使用的最後一個數字作爲計數器和身份，如：

var counter = 1; 
var temp = $("#color"+counter); 
$(window).scroll(function(event){ 

    if (st > lastScroll){ 
     $('html, body').animate({ 
      scrollTop: temp.offset().top 
     }, 600); 
     counter++; 
     temp = $("#color"+counter); 
    } 
    else { 

     counter--; 
     temp = $("#color"+counter); 

    } 

});