滾動到下一節

Question

我的代碼如下所示：

<div id="arrow"> 
    <a class="next"></a> 
    <a class="previous"></a> 
</div> 

<section id="first"> 
... 
</section> 

<section id="second"> 
... 
</section> 

<section id="third"> 
... 
</section> 

元素#arrow具有position: fixed，我試圖讓窗口滾動到下一section點擊a.next時。

例：第一次a.next被點擊，窗口滾動到section#first，第二次，窗口滾動到section#second等。同樣的事情發生a.previous。

有人知道如何解決這個問題嗎？

非常感謝！

---

編輯

我的JS代碼：

$('#arrows a.previous').click(function() { 
    $.scrollTo($(this).closest('section').prev(),800); 
}); 

$('#arrows a.next').click(function() { 
    $.scrollTo($(this).closest('section').next(),800); 
});  

Answer 1

您將需要處理在這種情況下，3個事件：

1. 當前頁位置 - 更新每次。
2. 用戶滾動手動頁面。
3. 用戶單擊上一個或下一個按鈕。

2,3需要使用當前頁面位置並根據頁面滾動的方向更新他。

我快速演示：Vertical Version jsFiddle --- Horizontal Version jsFiddle

豎版片段：

$(function(){ 
 
    
 
    var pagePositon = 0, 
 
     sectionsSeclector = 'section', 
 
     $scrollItems = $(sectionsSeclector), 
 
     offsetTolorence = 30, 
 
     pageMaxPosition = $scrollItems.length - 1; 
 
    
 
    //Map the sections: 
 
    $scrollItems.each(function(index,ele) { $(ele).attr("debog",index).data("pos",index); }); 
 

 
    // Bind to scroll 
 
    $(window).bind('scroll',upPos); 
 
    
 
    //Move on click: 
 
    $('#arrow a').click(function(e){ 
 
     if ($(this).hasClass('next') && pagePositon+1 <= pageMaxPosition) { 
 
      pagePositon++; 
 
      $('html, body').stop().animate({ 
 
        scrollTop: $scrollItems.eq(pagePositon).offset().top 
 
      }, 300); 
 
     } 
 
     if ($(this).hasClass('previous') && pagePositon-1 >= 0) { 
 
      pagePositon--; 
 
      $('html, body').stop().animate({ 
 
        scrollTop: $scrollItems.eq(pagePositon).offset().top 
 
       }, 300); 
 
      return false; 
 
     } 
 
    }); 
 
    
 
    //Update position func: 
 
    function upPos(){ 
 
     var fromTop = $(this).scrollTop(); 
 
     var $cur = null; 
 
     $scrollItems.each(function(index,ele){ 
 
      if ($(ele).offset().top < fromTop + offsetTolorence) $cur = $(ele); 
 
     }); 
 
     if ($cur != null && pagePositon != $cur.data('pos')) { 
 
      pagePositon = $cur.data('pos'); 
 
     }     
 
    } 
 
    
 
});

section { min-height:800px; } 
 
#arrow { 
 
    position:fixed; 
 
    right:0; 
 
    top:0; 
 
    background-color:black; 
 
    color:white; 
 
} 
 
#arrow a{ 
 
    display:inline-block; 
 
    padding:10px 20px; 
 
    cursor:pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id="arrow"> 
 
    <a class="next">next</a> 
 
    <a class="previous">prev</a> 
 
</div> 
 
<section style="background-color:green">...</section> 
 
<section style="background-color:blue">...</section> 
 
<section style="background-color:red">...</section>

Answer 2

我試圖與.closest做（ 「節」），但它只能當部分是你點擊的元素的父母，所以這是我得到的最好的方式

sections=$("section"); 
 
s=0; 
 

 
$(".next").click(function() { 
 
if(s<sections.length-1){ 
 
s++; 
 
$('html, body').animate({ 
 
    scrollTop: sections.eq(s).offset().top 
 
}, 500); 
 
}}); 
 

 
$(".previous").click(function() { 
 
if(s>0){ 
 
s--; 
 
$('html, body').animate({ 
 
    scrollTop: sections.eq(s).offset().top 
 
}, 500); 
 
}});

section{ 
 
    background-color:#bbb; 
 
    width:100%; 
 
    height:700px; 
 
    border-bottom:2px solid #eee; 
 
} 
 
#arrow{ 
 
    position:fixed; 
 

 
} 
 

 
#first{ 
 
\t background-color: red; 
 
} 
 
#second{ 
 
\t background-color:green; 
 
} 
 
#third{ 
 
\t background-color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="arrow"> 
 
    <a class="next">next</a> 
 
    <a class="previous">prev</a> 
 
</div> 
 

 
<section id="first"> 
 
... 
 
</section> 
 

 
<section id="second"> 
 
... 
 
</section> 
 

 
<section id="third"> 
 
... 
 
</section>

Answer 3

所有你需要的，允許用戶同時使用箭頭和滾動條：

var $sec = $("section"); 
 
$(".prev, .next").click(function(){ 
 
    var y = $sec.filter(function(i, el) { 
 
     return el.getBoundingClientRect().bottom > 0; 
 
    })[$(this).hasClass("next")?"next":"prev"]("section").offset().top; 
 
    $("html, body").stop().animate({scrollTop: y}); 
 
});

*{margin:0;padding:0;} 
 
#arrow{ 
 
    position:fixed; 
 
    width:100%; 
 
    text-align:center; 
 
} 
 
#arrow a{ 
 
    display:inline-block; 
 
    background: tomato; 
 
    padding:6px 15px; 
 
    border-radius:3px; 
 
    cursor:pointer; 
 
} 
 
section{ 
 
    height:1200px; 
 
    border:3px solid #444; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="arrow"><a class="prev">&uarr;</a><a class="next">&darr;</a></div> 
 
<section>1</section> 
 
<section style="height:500px;">2</section> 
 
<section>3</section> 
 
<section style="height:600px;">4</section> 
 
<section>5</section>

---

爲了解釋jQuery的一點：

// Cache your selectors 
var $sec = $("section"); 

// On any of both arrows click 
$(".prev, .next").click(function(){ 

    // We need to get current element 
    // before defining the `.next()` or `.prev()` element to target 
    // and get it's `offset().top` into an `y` variable we'll animate to. 
    // A current element is always the one which bottom position 
    // (relative to the browser top) is higher than 0. 
    var y = $sec.filter(function(i, el) { 
     return el.getBoundingClientRect().bottom > 0; 
    })[$(this).hasClass("next")?"next":"prev"]("section").offset().top; 
    // (Line above:) if the clicked button className was `"next"`, 
    // target the the `.next("section")`, else target the `.prev("section")` 
    // and retrieve it's `.offset().top` 

    $("html, body").stop().animate({scrollTop: y}); 

});