Question

我正在新网站上工作，所有这些都在一个页面中。

现在我有一个叫做“home”的主div，另一个叫做“colordiv”的div的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");这意味着临时变量得到一系列元素，其中类名有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);

    }

});

在div之间滚动 - jQuery

1 个答案: