滚动到下一个元素 [英] Scrolling to the next element
问题描述
我已经很烦人,告诉我我可能会觉得这个太复杂了。
所以我的标记(simplefied)如下所示:
< div class =container>
我的内容
< a href =#class =button>向下滚动< / a>
< / div>
< div class =container>
我的内容
< a href =#class =button>向下滚动< / a>
< / div>
< div class =container>
我的内容
< a href =#class =button>向下滚动< / a>
< / div>
< div class =container>
我的内容
< a href =#class =button>向下滚动< / a>
< / div>
基本上只是一些容器。
每个都包含不同的内容和按钮。
计划:
1)点击按钮后,该窗口应向下滚动到下一个容器。
2)最后一个按钮再次滚动到第一个容器。因此,我需要一个循环。
3)容器的数字可能会逐页变化。
EDIT: 4)这些容器可能不会总是直接的兄弟姐妹(见下面的标记)
问题:
给每个容器一个唯一的ID作为滚动效果的目标。
问题是,它很快就变得太杂乱。
我只是以某种方式定位下一个类为:container 的对象,并滚动到那个?
我不知道如果js或jquery是正确的方法。
我真的很感谢推进正确的方向。 b
EDIT:容器不一定是彼此之间的直接兄弟。
< div class =row>
< div class =container>
我的内容
< a href =#class =button>向下滚动< / a>
< / div>
< div class =container>
我的内容
< a href =#class =button>向下滚动< / a>
< / div>
< / div>
< div class =container>
我的内容
< a href =#class =button>向下滚动< / a>
< / div>
< div class =container>
我的内容
< a href =#class =button>向下滚动< / a>
< / div>
< div class =row>
< div class =container>
我的内容
< a href =#class =button>向下滚动< / a>
< / div>
< div class =container>
我的内容
< a href =#class =button>向下滚动< / a>
< / div>
< / div>
简单解决方案:
要获取下一个容器,请尝试使用 next()
。
基本上,< div>
容器是彼此的兄弟, code> .next()在一个div容器上会给你下一个。
$(。button)。on(click,function(e){
$(document).scrollTop($(this).parent()。next()。
// $(this).parent()。next()//这是下一个div容器
return false; //防止锚点
});
您只需使用 $(this)
获得链接对象, .parent()
以获取链接的父级,即< div>
,然后
.next()
获取下一个兄弟(请注意它会自动包装,所以最后的兄弟姐妹 < div>
是第一个 < div>!),
.offset()获得它相对于页面的位置,
.top`将它相对于顶部边框。
c $ c> $(document).scrollTop()滚动到该位置。
对于一个完全通用的解决方案,使用:
$(。 ){
container = $(this).parent();
//如果我是组中的最后一个.container ...
while(document!= container [0] //未达到root
&& container.find('〜.container,〜:has(.container)')。length == 0)
container = container.parent(); //搜索parent的兄弟姐妹
nextdiv = container.nextAll('。container,:has(.container)')。
//没有下一个.container发现,回到第一个容器
if(nextdiv.length == 0)nextdiv = $(document).find('。container:first') ;
$(document).scrollTop(nextdiv.offset()。top);
// $(this).parent()。next()//这是下一个div容器。
return false;
});
代码基本上使用 container.find('〜.container,〜 :has(.container)')
来查找具有或是 .container
的任何兄弟。如果没有,则向上DOM树1步。
找到一个或者有 .container
,它使用 nextdiv = container.nextAll('。container,:has(.container)')获取它first();
。
最后,如果没有找到,检查 nextdiv.length == 0
,只需抓住第一个 .container
在整个页面。
然后滚动到 .container
p>
要滚动动画,请将 scrollTop $ c $在
animate
函数中的
).scrollTop(nextdiv.offset()。top); // snap to new scroll position
$('body')。animate({scrollTop:nextdiv.offset()。top},300); //动画滚动
I'm struggling with a jquery or javascript problem.
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.
2) The last button scrolls to the first container again. So I need a loop.
3) The numbers of containers may change from page to page.
EDIT: 4) The containers may not always be direct siblings to each other (see markup below)
The Problem:
I could get this to work by giving each container a unique ID as a target for the scroll effect.
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.
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>
Simple solution:
To get the next container, try using next()
.
Basically, the <div>
containers are siblings of each other, so calling .next()
on one div container will give you the next.
$(".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.
Then you just use $(document).scrollTop()
to scroll to that location.
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.
After it finds something which is or has a .container
, it grabs it with nextdiv = container.nextAll('.container, :has(.container)').first();
.
Lastly, if nothing is found, checked by nextdiv.length==0
, just grab the first .container
in the whole page.
Then scroll to whatever .container
was grabbed.
To animate the scroll, place the scrollTop
property in an animate
function:
// $(document).scrollTop(nextdiv.offset().top); // snaps to new scroll position
$('body').animate({scrollTop:nextdiv.offset().top},300); // animates scrolling
这篇关于滚动到下一个元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!