滾動到下一部分

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需要使用當前頁面位置並根據頁面滾動的方向更新他。

我的快速演示： 垂直版本jsFiddle --- 水平版本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

您需要做的，以允許用戶同時使用箭頭和滾動條：

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

});

Answer 3

我已經嘗試過使用.closest（“ section”），但是它僅在該部分是您單擊的元素的父級時才有效，所以這是我得到的最好方法

 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{ background-color: red; } #second{ background-color:green; } #third{ 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>