jQuery的scrollTop有点跳动

Question

我正在构建一个带有垂直滚动的网站。

我已经实现了下面的jquery:

<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>

使用以下 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>

我的问题是，在“主页”和“联系方式”链接之间跳转时，滚动可能会有点跳跃。诚然，只有当您在滚动有时间喘口气之前单击其中一个按钮时，它才会执行此操作，但是这个特定的客户对事物的工作方式非常具体，而且我知道他们会接受它(而且我永远不会故意想要发布带有错误的东西，无论多么小)。

我的问题是，是否有一种简单的方法可以在 jQuery 中对操作进行排队，以便上一个操作有时间在下一个操作开始之前停止并喘口气？

我在点击函数之后和动画函数之后尝试过 .stop() 。 click 函数之后的一个使情况变得更糟，而 animate 函数之后的一个则把这一切都破坏了......

非常感谢!

凯文

Answer 1

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

此外，作为额外的好处，如何将其全部设为一个功能，而不是为每个菜单项提供一个功能？像这样的东西:

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