javascript 滚动到下一个元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12329008/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scrolling to the next element
提问by Arrowcatch
I'm struggling with a jquery or javascript problem.
我正在努力解决 jquery 或 javascript 问题。
It already got annoying which tells me I might think too complicated on this one.
它已经很烦人了，这告诉我我可能认为这个问题太复杂了。
So my markup (simplyfied) looks like this:
所以我的标记（简化）如下所示：
<div class="container">
My Content
<a href="#" class="button">scroll down</a>
</div>
<div class="container">
My Content
<a href="#" class="button">scroll down</a>
</div>
<div class="container">
My Content
<a href="#" class="button">scroll down</a>
</div>
<div class="container">
My Content
<a href="#" class="button">scroll down</a>
</div>
Basically just some containers.
基本上只是一些容器。
Each one contains different content and a button.
每一个都包含不同的内容和一个按钮。
The Plan:
计划：
1) After a click on a button the window should scroll down to the next container.
1) 单击按钮后，窗口应向下滚动到下一个容器。
2) The last button scrolls to the firstcontainer again. So I need a loop.
2) 最后一个按钮再次滚动到第一个容器。所以我需要一个循环。
3) The numbersof containers may change from page to page.
3)容器的数量可能会因页面而异。
EDIT:4) The containers may not always be direct siblings to each other (see markup below)
编辑：4）容器可能并不总是彼此直接兄弟（见下面的标记）
The Problem:
问题：
I could get this to work by giving each container a unique ID as a target for the scroll effect.
我可以通过给每个容器一个唯一的 ID 作为滚动效果的目标来实现这一点。
The problem with that is that it gets too messy quickly.
这样做的问题是它很快就会变得太乱。
Cant I just somehow target "the next object with the class: container", and scroll to that?
我不能以某种方式将“下一个对象与类：容器”作为目标，然后滚动到那个对象吗？
I'm not sure if js or jquery is the right approach. My knowledge in both is somewhat limited.
我不确定 js 或 jquery 是否是正确的方法。我对两者的了解都有些有限。
I would be really grateful for a push in the right direction.
我真的很感激朝着正确的方向努力。
EDIT:The containers may not always be direct siblings of each other.
编辑：容器可能并不总是彼此的直接兄弟姐妹。
<div class="row">
<div class="container">
My Content
<a href="#" class="button">scroll down</a>
</div>
<div class="container">
My Content
<a href="#" class="button">scroll down</a>
</div>
</div>
<div class="container">
My Content
<a href="#" class="button">scroll down</a>
</div>
<div class="container">
My Content
<a href="#" class="button">scroll down</a>
</div>
<div class="row">
<div class="container">
My Content
<a href="#" class="button">scroll down</a>
</div>
<div class="container">
My Content
<a href="#" class="button">scroll down</a>
</div>
</div>
回答by ronalchn
Simple solution:
简单的解决方案：
To get the next container, try using next().
要获取下一个容器，请尝试使用next().
Basically, the <div>containers are siblings of each other, so calling .next()on one div container will give you the next.
基本上，<div>容器是彼此的兄弟，所以调用.next()一个 div 容器会给你下一个。
$(".button").on("click", function(e) {
$(document).scrollTop($(this).parent().next().offset().top);
// $(this).parent().next() // this is the next div container.
return false; // prevent anchor
});
You just use $(this)to get the link object, .parent()to get the parent of the link, which is the <div>, then .next()to get the next sibling (note it will wrap automatically, so the sibling after the last <div>is the first<div>!),.offset()to get its position relative to the page,.top` to get it relative to the top border.
你只是$(this)用来获取链接对象，获取链接.parent()的父级，即<div>，然后.next()获取下一个兄弟（注意它会自动换行，所以最后一个之后的兄弟<div>是第一个<div>!),.offset() to get its position relative to the page,.top`相对于顶部边框获取它。
Then you just use $(document).scrollTop()to scroll to that location.
然后您只需使用$(document).scrollTop()滚动到该位置。
For a completely general solution, use:
对于完全通用的解决方案，请使用：
$(".button").on("click", function(e) {
container = $(this).parent();
// if I am the last .container in my group...
while ( document != container[0] // not reached root
&& container.find('~.container, ~:has(.container)').length == 0)
container = container.parent(); // search siblings of parent instead
nextdiv = container.nextAll('.container, :has(.container)').first();
// no next .container found, go back to first container
if (nextdiv.length==0) nextdiv = $(document).find('.container:first');
$(document).scrollTop(nextdiv.offset().top);
// $(this).parent().next() // this is the next div container.
return false;
});
?The code basically uses container.find('~.container, ~:has(.container)')to find any sibling that has or is a .container. If nothing, then go up the DOM tree 1 step.
? 该代码基本上用于container.find('~.container, ~:has(.container)')查找具有.container. 如果什么都没有，那么向上 DOM 树 1 步。
After it finds something which is or has a .container, it grabs it with nextdiv = container.nextAll('.container, :has(.container)').first();.
在它找到具有 或 的东西后.container，它会用 抓取它nextdiv = container.nextAll('.container, :has(.container)').first();。
Lastly, if nothing is found, checked by nextdiv.length==0, just grab the first .containerin the whole page.
最后，如果没有找到，通过检查nextdiv.length==0，只抓取.container整个页面中的第一个。
Then scroll to whatever .containerwas grabbed.
然后滚动到任何.container被抓住的东西。
To animate the scroll, place the scrollTopproperty in an animatefunction:
要动画滚动，请将scrollTop属性放在animate函数中：
// $(document).scrollTop(nextdiv.offset().top); // snaps to new scroll position
$('body').animate({scrollTop:nextdiv.offset().top},300); // animates scrolling
回答by Rusty Jeans
JavaScript is not required for this. You can use HTML anchors.
这不需要 JavaScript。您可以使用 HTML 锚点。
<div class="container" id="first">
My Content
<a href="#second" class="button">scroll down</a>
</div>
<div class="container" id="second">
My Content
<a href="#third" class="button">scroll down</a>
</div>
<div class="container" id="third">
My Content
<a href="#fourth" class="button">scroll down</a>
</div>
<div class="container" id="fourth">
My Content
<a href="#first" class="button">scroll down</a>
</div>
回答by automaticAllDramatic
What you want can be easily achieved through parent()and child().
您可以通过parent()和轻松实现您想要的child()。
If the number of containers on each page is different, then you should start ID'ing (don't know if that's a term) containers serially. Something like, class="container-1"
如果每个页面上的容器数量不同，那么您应该开始连续识别（不知道这是不是一个术语）容器。就像是，class="container-1"
The click event on the last button should do something like:
最后一个按钮上的单击事件应该执行以下操作：
var num = $('div[class^="container-"]').filter(function() {
return((" " + this.className + " ").match(/\scontainer-\d+\s/) != null);
});
num++;
var last_container = $(this).parent('.container' + num);
last_container .scrollTo();
Am sure you can figure out what the next button should do ;)
我相信你可以弄清楚下一个按钮应该做什么;)
