滚动到下一部分

时间:2015-04-20 23:12:40

标签: javascript jquery css scroll

我的代码如下所示:

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

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

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

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

元素#arrowposition: fixed,我在点击section时尝试让窗口滚动到下一个a.next

例如:第一次点击a.next时,窗口会滚动到section#first,第二次,窗口会滚动到section#second,等等。{{1 }}

有人知道如何解决这个问题吗?

非常感谢!


修改

我的JS代码:

a.previous

3 个答案:

答案 0 :(得分:2)

在这种情况下,你需要处理3个事件:

  1. 当前页面位置 - 每次更新。
  2. 用户手动滚动页面。
  3. 用户点击上一个或下一个按钮。
  4. 2,3需要使用当前页面位置并根据页面滚动的方向更新他。

    我的快速演示:Vertical Version jsFiddle --- Horizontal Version jsFiddle

    垂直版本摘要:

    &#13;
    &#13;
    $(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');
           }                   
        }
        
    });
    &#13;
    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;
    }
    &#13;
    <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>
    &#13;
    &#13;
    &#13;

答案 1 :(得分:2)

您只需要允许用户同时使用箭头和滚动条:

&#13;
&#13;
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});
});
&#13;
*{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;
}
&#13;
<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>
&#13;
&#13;
&#13;


稍微解释一下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});

});

答案 2 :(得分:0)

我曾尝试使用.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>