Question

我的页面上有很多屏幕。有一个下一个和一个上一个按钮，用于向上或向下滚动页面。现在，这里出现了问题：一旦我点击了最后一页并点击了 next （下一步）按钮，就会给我一个错误。

我知道这是由于索引无法超出我最初制作的页面数量。我已经尝试过像这样的简单 if 语句：

if (index > $(".scenes").length) {
$(".scenes").first;
}

但是，这根本没有给我任何东西。

也许我还没走上正确的轨道，但是一旦按钮单击滚动到最后一个，我如何告诉程序跳回到屏幕的第一部分（顶部）？

这是完整的代码：

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

var brightness = 60;
var $sceneLength = $('.scenes').length;

$(".scenes").each(function(index) {

    $(this).css({ "background-color": "hsl(200, 100%, " + brightness + "%" + ")" })

    brightness -= 10;

    console.log(index + ": " + $(this).text());
});


$(window).scroll(function() {
    // is in viewport function
    $.fn.isInViewport = function() {
        var elementTop = $(this).offset().top;
        var elementBottom = elementTop + $(this).outerHeight();
        var viewportTop = $(window).scrollTop();
        var viewportBottom = viewportTop + $(window).height();

        return elementBottom > viewportTop && elementTop < viewportBottom;
    }

    $('.scenes').each(function(index) {
        if ($(this).isInViewport()) {
            if (index >= $sceneLength / 2) {
                $("h1").css('color', 'white');
            } else {
                $("h1").css('color', 'black');
            }
        }
    })
});

// button scroll function
$("#next").click(function(index) {
    $(".scenes").scrollTop(index);
    $('.scenes').first();
});

var count = 0;
sections = $('.scenes');
scrollPos = function(index) {
    $('html, body').animate({
        scrollTop: sections.eq(index).offset().top
    }, 'slow');

    console.log("count: " + count);
};

$("#next").click(function() {
    count++;
    scrollPos(count);
});

$("#prev").click(function() {
    count--;
    scrollPos(count);
});
});

jQuery滚动不循环

0 个答案: