How do I get a div to scroll to the next div with a specific class?

Question

OK I have this code:

$(document).ajaxComplete(function(){
            var a = $('.pipeHolder').height();
            var b = $('.container').first('#pip').height();
            var c = 0;  
            $("#scrollup").click(function() {
                scr = "-=600"
                $(".container").animate({
                    scrollTop: scr
                });
            });
            $("#scrolldown").click(function() {
                var scr = a+b+c;

                $('.container').animate({
                    scrollTop: scr
                      }, {
                        complete: function () {
                            a = 0
                            b = $('.container').children().next('#pip').height();
                            c = scr;
                            alert(b);

                        }
                      });

            });
})

I have multiple divs within a content div that have the class name ".pipeholder". What I want to have happen is when you click a button it will just move to the next one on down the page and stop at the last one.

HTML:

 <div class="pipeHolder">
                <div class="pipeBottom">
                    <img class="pipe4" src="img/pipesBlue.png" alt="" />
                </div>
            </div>

            <div class="modLeft">

                <div class="project">
                    <div class="projectInfo"> 
                        <h1>Business Growth Enterprises</h1>           
                        <p>Technologies for this project:</p>
                            <ul>
                                <li>Adobe Creative Suite CS6</li>
                                <li>XHTML</li>
                                <li>CSS</li>
                                <li>JavaScript</li>
                                <li>JQuery</li>
                            </ul><br />
                    </div>
                    <div class="projectPic">            
                        <img src="scrn/bge1.jpg" width="300" height="250" class="" alt="" />
                        <div class="screenshots">

                        <a class="fancybox" href="img/bgeSS1.jpg" data-fancybox-group="gallery13" title="Business Growth Enterprises Home Page">111111111111111111111111111</a>

                        <a class="fancybox" href="img/bgeSS2.jpg" data-fancybox-group="gallery13" title="Profile Page">111111111111111111111111111</a>

                        <a class="fancybox" href="img/bgeSS3.jpg" data-fancybox-group="gallery13" title="Lightbox Form Submission">111111111111111111111111111</a>


                        </div>
                        <div class="liveSite" id="extLink"><a href="http://www.bizgrow.net" target="_blank" title="View Business Growth Enterprise's Live Website">View-Business-Growth-Enterprise's-Live-Website</a></div>
                    </div>
                    <div class="projectDesc">
                        <h1>Website Design and Development</h1>
                        <p>Another personal client of mine. This is a Business Development Consultant for legal Shield who wanted a personal website. She needed to have it where people could sign up for seminars that she put on at random places in Atlanta. also have a bio and information about her partners.</p>
                    </div>
                    <div class="clr"></div>
                </div>

            </div>

<!------------------------------------------ Project 14 - Pipe Right to Left -->

            <div class="pipeHolder">
                <div class="pipeLeft">
                    <img class="pipe3" src="img/pipesBlue.png" alt="" />
                </div>
            </div>

            <div class="modRight">

                <div class="project">
                    <div class="projectInfo"> 
                        <h1>Avoid Foreclosure Atlanta</h1>           
                        <p>Technologies for this project:</p>
                            <ul>
                                <li>Adobe Creative Suite CS6</li>
                                <li>XHTML</li>
                                <li>CSS3</li>
                                <li>JavaScript</li>
                                <li>JQuery</li>
                                <li>SharePoint</li>
                                <li>DreamWeaver Templates</li>
                                <li>Server Side Includes</li>
                            </ul><br />
                    </div>
                    <div class="projectPic">            
                        <img src="scrn/af1.jpg" width="300" height="250" class="" alt="" />
                        <div class="screenshots">

                        <a class="fancybox" href="img/placeHolder.jpg" data-fancybox-group="gallery" title="1">111111111111111111111111111</a>

                        <a class="fancybox" href="img/placeHolder.jpg" data-fancybox-group="gallery" title="2">111111111111111111111111111</a>

                        <a class="fancybox" href="img/placeHolder.jpg" data-fancybox-group="gallery" title="3">111111111111111111111111111</a>

                        <a class="fancybox" href="img/placeHolder.jpg" data-fancybox-group="gallery" title="4">111111111111111111111111111</a>


                        </div>
                        <div class="liveSite" id="extLink"></div>
                    </div>
                    <div class="projectDesc">
                        <p></p>
                        <p></p>
                    </div>
                    <div class="clr"></div>
                </div>

            </div>

<!------------------------------------------ Project 15 - Pipe Left to Right -->

            <div class="pipeHolder">
                <div class="pipeBottom">
                    <img class="pipe4" src="img/pipesBlue.png" alt="" />
                </div>
            </div>

            <div class="modLeft">

                <div class="project">
                    <div class="projectInfo"> 
                        <h1>Models Finder</h1>           
                        <p>Technologies for this project:</p>
                            <ul>
                                <li>Adobe Creative Suite CS6</li>
                                <li>XHTML</li>
                                <li>CSS3</li>
                                <li>JavaScript</li>
                                <li>JQuery</li>
                                <li>SharePoint</li>
                                <li>DreamWeaver Templates</li>
                                <li>Server Side Includes</li>
                            </ul><br />
                    </div>
                    <div class="projectPic">            
                        <img src="scrn/mf1.jpg" width="300" height="250" class="" alt="" />
                        <div class="screenshots">

                        <a class="fancybox" href="img/placeHolder.jpg" data-fancybox-group="gallery" title="1">111111111111111111111111111</a>

                        <a class="fancybox" href="img/placeHolder.jpg" data-fancybox-group="gallery" title="2">111111111111111111111111111</a>

                        <a class="fancybox" href="img/placeHolder.jpg" data-fancybox-group="gallery" title="3">111111111111111111111111111</a>

                        <a class="fancybox" href="img/placeHolder.jpg" data-fancybox-group="gallery" title="4">111111111111111111111111111</a>


                        </div>
                        <div class="liveSite" id="extLink"></div>
                    </div>
                    <div class="projectDesc">
                        <p></p>
                        <p></p>
                    </div>
                    <div class="clr"></div>
                </div>

            </div>

You're giving us thin air, but if I understand what you want, take a look at this: http://demos.flesler.com/jquery/scrollTo/ You can then adapt the idea to what you need. Use the `offset()` method to know an elements position, and scroll there. — Fábio Duque Silva, Dec 15 '12 at 00:38
bob the .ajaxComplete is once the ajax loaded content is loaded, its the same as doc ready only when the ajax contant is loaded stop being difficult... really??? thanks for the down vote BTW — DJERock, Dec 15 '12 at 06:49
@DJERock You're using incorrectly. `.ajaxComplete` shouldn't be used on `$(document)` — bobthyasian, Dec 15 '12 at 07:07

score 1 · Answer 1 · answered Dec 15 '12 at 00:46

1

I think this is what you are looking for.

   $(function(){
       $("#scrollup").click(function() {
         $(".container").stop().scrollTo( '+=600', 500 );
       });

       $("#scrolldown").click(function() {
         $(".container").stop().scrollTo( '-=600', 500 );
       });
    });

answered Dec 15 '12 at 00:46

bobthyasian

933
5
17

i need the scroll to stop at the result of the sum of three div heights not a set up and down otherwise i wouldn't have posted here – DJERock Dec 15 '12 at 06:52
Or do you really just want to scroll to a `
`?
– bobthyasian Dec 15 '12 at 07:00

How do I get a div to scroll to the next div with a specific class?

1 Answers1