[英]Scroll to next section
我的代码如下所示:
<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);
});
在这种情况下,您将需要处理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>
您需要做的,以允许用户同时使用箭头和滚动条:
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">↑</a><a class="next">↓</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});
});
我已经尝试过使用.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.