jQuery 滚动到 next/prev 部分

Question

很多关于这个的问题 - 但我看过的解决方案不适合我的使用。

我需要一个 jQuery 函数来使页面滚动到我网站中的下一个 "section" - 但我的下一个/上一个按钮全局定位在这些部分的上方 - 因此使用像转到这样的方法next parent 不工作，也找不到下一个 'section' 因为层次结构嵌套不正确，因为箭头按钮位于部分本身的外部...

无论节数如何，代码都必须有效 - 不需要硬编码节 classes/ids...

有什么想法吗？

下面的代码示例：

<div class="arrows">
<a href="#" class="arrow-up prev-section"></a>
<a href="#" class="arrow-down next-section"></a>
</div>

<section class="panelSection">
... section content here ...
</section>

<section class="panelSection">
... 2nd section content here ...
</section>

Answer 1

试试这个：

var sections = $('.panelSection');
console.log(sections);
var i =0;
var scrolto = 0;

function next(){

    if(i == 0){
        $('.prev-section').show();
    }
    if(i < sections.length -1){
        i++;
        if(i == sections.length -1){
             $('.next-section').hide();   
        }
         $('html, body').animate({
            scrollTop: sections[i].offsetTop
        }, 2000);
    }else{
        alert('end reached');
    }
}
function prev(){
    if(i == sections.length -1){
        $('.next-section').show();
    }
    if(i > 0){
        i--;
        if(i == 0){
            $('.prev-section').hide();
        }
         $('html, body').animate({
            scrollTop: sections[i].offsetTop
        }, 2000);
    }    
}
$('html').keydown(function(e){
    if(e.which == '38'){
        prev();    
    }
   if(e.which == '40'){
        next();    
    }
});
$('.next-section').click(function(e){
   e.preventDefault();
   next();
});

$('.prev-section').click(function(e){
   e.preventDefault();
   prev();
});

您将这些部分存储在一个数组中，并在单击时循环遍历该数组，然后滚动到偏移顶部。制作了 fiddle，因此它隐藏了按钮并检查了最小-最大部分数，还包括上下键箭头支持

fiddle: http://jsfiddle.net/yn6maby0/25/

jQuery 滚动到 next/prev 部分

jQuery Scroll to next/prev section

jquery

scroll