滚动到下一个部分

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属性，并且我正在尝试使窗口在单击a.next时滚动到下一个section。

例如：第一次单击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);
});     

- Matheus Souza

---

这是垂直滚动还是水平滚动？ - Roko C. Buljan

http://jsfiddle.net/aVJBY/ 这就是你想要的。 - Paul Fitzgerald

可能是https://dev59.com/4W_Xa4cB1Zd3GeqPwQR6的重复问题。 - Paul Fitzgerald

@Paul Fitzgerald，这不是一个好的例子，因为它没有考虑手动滚动。 - Shlomi Hassid

Answer 1

你需要处理以下3个事件：

1. 当前页面位置-每次更新。
2. 用户手动滚动页面。
3. 用户点击上一页或下一页按钮。

2和3需要使用当前页面位置，并根据页面滚动方向进行更新。

我的快速演示： 垂直版本 jsFiddle --- 水平版本 jsFiddle

Vertical Version snippet :

$(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>

- Shlomi Hassid

---

这正是我一直在寻找的，谢谢！我扩展了您的函数，使用一个导航来向下滚动页面，一旦到达最后一个项目，就会滚回顶部：[fiddle链接]（http://jsfiddle.net/cgq6cjtn/） - GregT

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

});

- Roko C. Buljan

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>

- Anis Boukhris

---

如果您混合使用箭头和滚动条用户操作，似乎会使您的代码出现问题。此外，在允许用户进行点击之前最好使用.stop()。 - Roko C. Buljan