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>

我的问题是在主页和联系人链接之间跳转时滚动可能有点跳跃。不可否认，只有在滚动有时间点击它之前点击其中一个按钮才会这样做，但是这个特定的客户端非常具体地说明了它是如何工作的，我知道他们会接受它（加上我永远不会故意想要发布一些有bug的东西，无论多么微不足道。）

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

我在click函数之后和animate函数之后尝试过.stop（）。点击功能之后的一个变得更糟，动画功能之后的那个一起打破了它......

非常感谢提前！

凯文

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

Answer 2

这是你拥有的。

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

如果你把return if，那就行了。它也会阻止默认操作。

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

    return false;                  
});

此外，您可能希望重新调整行以处理滚动到特定点的这些单击事件。

例如：

$('traverse to menu anchor').on('click', function() {
    var target = $(this).attr('href');

    $('html, body').animate({ scrollTop: $(target).offset().top }, 1000 );
        return false;
});

希望这有帮助。

jQuery scrollTop有点跳跃

2 个答案: