Question

很多关于此问题的问题 - 但我所看到的解决方案并不适合我的使用。

我需要一个jQuery函数来使页面滚动到下一个＆＃34;部分＆＃34;在我的网站上 - 但是我的下一个/上一页按钮位于各个部分的全局位置 - 因此使用像下一个父母那样的方法不起作用，也没有找到下一个＆＃39;部分＆＃39;由于箭头按钮位于部分本身外部，因此层次结构嵌套不正确...

代码必须工作，无论部分数量多少 - 并且不需要硬编码的部分类/ ID ....

有什么想法吗？

下面的代码示例：

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

将这些部分存储在数组中并在点击时循环遍历该数组，然后滚动到偏移顶部。做了小提琴，所以它隐藏按钮并检查最小 - 最大数量的部分，也包括向上的关键箭头支持

小提琴：http://jsfiddle.net/yn6maby0/25/

jQuery滚动到下一个/上一节

1 个答案: