Question

我有一个很长的页面分为<section>个标签。有固定的位置导航，可以在页面上下滚动。我需要每次按下“向下”按钮将下一个<section>滚动到页面顶部。 “向上”按钮也是如此，它应该将之前的<section>滚动到页面顶部。我不希望必须在每个部分中包含具有指定scrollTo函数的导航实例。我宁愿它更具普遍性。如果每个部分都有链接，那就简单了。但是，导航位置是固定的，所以我不能使用.next（）或.closest（）。我想我必须索引部分的数量并逐步完成它们？

这仅适用于第一次出版：

$('#scrollWindowUp').click(function(e){
    e.preventDefault();
    $('html, body').animate({ scrollTop: ($('section').next().offset().top)},500);
});

$('#scrollWindowDown').click(function(e){
    e.preventDefault();
    $('html, body').animate({ scrollTop:($('section').prev().offset().top)},500);
});

这是fiddle

每个部分都是视口的高度，因此您一次只能看到一个。我只是抓住$('window').height();并将其应用到<section>，以便填充窗口。我已尝试使用该计算进行滚动，但它总是稍微偏离。

Answer 1

您需要设置为全局变量以记住您所在的元素。每次你去$('section')，它都会抓住列表中的第一个元素。

var $section = $('section').first();

$('#scrollWindowUp').click(function(e){
    e.preventDefault();

    if ($section.is('section:last')) {
        return;
    }

    $section = $section.next();

    scroll();
});

$('#scrollWindowDown').click(function(e){
    e.preventDefault();

    if ($section.is('section:first')) {
        return;
    }

    $section = $section.prev();

    scroll();
});

function scroll() {
    $('html, body').animate({ scrollTop: ($section.offset().top)},500);    
}

Answer 2

如果用户自己滚动页面，则存储当前索引或元素可能会产生不良影响，因为当它们最后一次单击＃scrollWindowDown而不是屏幕上的下一部分时，它将跳转到下一部分。

要允许按钮从当前部分滚动，无论用户是否滚动，您都需要计算当前可见的部分。

function getCurrentSection () {
    var cutoff = $(window).scrollTop();
    var curIndex = 0;
    for(var index = 0; index < $('section').length; index++){
        if ($('section').eq(index).offset().top >= cutoff) {
            curIndex = index;
            break;
        }
    }
    return curIndex;
};

$('#scrollWindowUp').click(function(e){
    e.preventDefault();
    var curIndex = getCurrentSection();
    if (curIndex === 0) { return; }
    $('html, body').animate({ scrollTop: ($('section').eq(curIndex-1).offset().top - 1)},500);
});

$('#scrollWindowDown').click(function(e){
    e.preventDefault();
    var curIndex = getCurrentSection();
    if (curIndex === $('section').length) { return; }
    var cutoff = $(window).scrollTop();
    if ($('section').eq(curIndex).offset().top !== cutoff+1) { curIndex = curIndex-1; } /* Check if the current section is at the top of the page or has been scrolled */

    $('html, body').animate({ scrollTop: ($('section').eq(curIndex+1).offset().top - 1)},500);
});

单击滚动到每个部分的顶部

2 个答案: