滚动到下一个元素 [英] Scrolling to the next element

查看:157
本文介绍了滚动到下一个元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述



我已经很烦人,告诉我我可能会觉得这个太复杂了。



所以我的标记(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; //防止锚点
});

http://jsfiddle.net/Pm3cj/1/



您只需使用 $(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>

http://jsfiddle.net/Pm3cj/3/






要滚动动画,请将 scrollTop animate 函数中的属性:

  ).scrollTop(nextdiv.offset()。top); // snap to new scroll position 
$('body')。animate({scrollTop:nextdiv.offset()。top},300); //动画滚动

http://jsfiddle.net/Pm3cj/4/


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

http://jsfiddle.net/Pm3cj/1/

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.

http://jsfiddle.net/Pm3cj/3/


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

http://jsfiddle.net/Pm3cj/4/

这篇关于滚动到下一个元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆