Question

I am building a site with vertical scroll.

I have implemented the jquery below:

<script type="text/javascript">
$("document").ready(function() {            

            $('.homebutton').click(function(){

                $('html, body').animate({
                    scrollTop: $("#home").offset().top
                }, 1500);                  


             });



            $('.aboutbutton').click(function(){

                $('html, body').animate({
                    scrollTop: $("#about").offset().top
                }, 1500);                  


             });


            $('.portfoliobutton').click(function(){

                $('html, body').animate({
                    scrollTop: $("#portfolio").offset().top
                }, 1500);                  


             });



            $('.contactbutton').click(function(){

                $('html, body').animate({
                    scrollTop: $("#contact").offset().top
                }, 1500);                  


             });

});
</script>

With the following HTML :

<div id="wrapper">

<div id="home" class="tab home">

    <div class="header">

        <div class="logo">

            <img src="images/logo.jpg" />

        </div>

        <div class="menuholder">

            <ul id="homemenu" class="menu">

                <li><a class="active homebutton" href="#home">HOME<br /></a>   </li>
                <li><a class="aboutbutton" href="#about">ABOUT<br /></a>   </li>
                <li><a class="portfoliobutton" href="#portfolio">PORTFOLIO<br /></a>   </li>
                <li><a class="contactbutton" href="#contact">CONTACT<br /></a>   </li>

            </ul>

        </div>

        <div class="clr"></div>

    </div>

    <div class="content">

    </div>

</div>

<div id="about" class="tab">

    <div class="header">

        <div class="logo">

            <img src="images/logo.jpg" />

        </div>

        <div class="menuholder">

            <ul id="aboutmenu" class="menu">

                <li><a href="#home" class="homebutton">HOME</a>   </li>
                <li><a class="active aboutbutton" href="#about">ABOUT<br /><span>All you need to know</span></a>   </li>
                <li><a href="#portfolio" class="portfoliobutton">PORTFOLIO<br /><span>See what we can do!</span></a>   </li>
                <li><a href="#contact" class="contactbutton">CONTACT<br /><span>Get in touch and say HI!</span></a>   </li>

            </ul>

        </div>

    </div>

    <div class="content">

    </div>

</div>

<div id="portfolio" class="tab">

    <div class="header">

        <div class="logo">

            <img src="images/logo.jpg" />

        </div>

        <div class="menuholder">

            <ul id="portfoliomenu" class="menu">

                <li><a href="#home" class="homebutton">HOME</a>   </li>
                <li><a href="#about" class="aboutbutton">ABOUT<br /><span>All you need to know</span></a>   </li>
                <li><a class="active portfoliobutton" href="#portfolio">PORTFOLIO<br /><span>See what we can do!</span></a>   </li>
                <li><a href="#contact" class="contactbutton">CONTACT<br /><span>Get in touch and say HI!</span></a>   </li>

            </ul>

        </div>

    </div>

    <div class="content">

    </div>

</div>

<div id="contact" class="tab">

    <div class="header">

        <div class="logo">

            <img src="images/logo.jpg" />

        </div>

        <div class="menuholder">

            <ul id="contactmenu" class="menu">

                <li><a href="#home" class="homebutton">HOME</a>   </li>
                <li><a href="#about" class="aboutbutton">ABOUT<br /><span>All you need to know</span></a>   </li>
                <li><a href="#portfolio" class="portfoliobutton">PORTFOLIO<br /><span>See what we can do!</span></a>   </li>
                <li><a class="active contactbutton" href="#contact">CONTACT<br /><span>Get in touch and say HI!</span></a>   </li>

            </ul>

        </div>

    </div>

    <div class="content">

    </div>

</div>

</div>

My problem is that the scroll can be a little jumpy when jumping between the Home and Contact links. Admittedly it only does this when you click on one of the buttons before the scroll has had time to catch its breath, but this particular client is very specific with how things work, and I know they will pick up on it (plus I would never knowingly want to release something with a bug, however minor).

My question is, is there an easy way to queue the actions in jQuery so the previous action has time to stop and catch its breath before the next one starts?

I have tried .stop() after the click function, and after the animate function. The one after the click function made it worse, and the one after the animate function broke it all together…

Many thanks in advance!

Kevin

Answer 1

$('.homebutton').click(function(e){
    e.preventDefault(); //This will stop the jumping
    $('html, body').animate({
        scrollTop: $("#home").offset().top
    }, 1500);                  
});

Also, as an added bonus, how about making it all one function instead of having one function for each menu item? Something like:

$("#homemenu a").click(function(e){
    e.preventDefault();
    var section = $(this).attr("href");
    $("html, body").animate({
        scrollTop: $(section).offset().top  
    }, 1500);   
});