jquery - 在 div 之间滚动 - jQuery

Question

我正在开发一个新网站，全部在一个页面上。

现在我有了名为“home”的主 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"); 这意味着 temp 变量获取一系列元素，其类名具有 color_div。

因此，您在下面使用 temp.offset().top，jQuery 不会获取当前的 offset().top。

如果 .color_div 有像 #color1 #color2 或 #colorN 这样的 id，也许你可以使用最后一个数字作为计数器和标识，比如:

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

    }

});