如何让div滚动到具有特定类的下一个div？

Question

好的我有这段代码：

$(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);

                        }
                      });

            });
})

我在内容div中有多个div，其类名为“.pipeholder”。我想要发生的是当你点击一个按钮时，它将移动到页面下方的下一个按钮并停在最后一个按钮上。

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>

Answer 1

我认为这就是你要找的东西。

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

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