2

我正在建立一个垂直滚动的网站。

我已经实现了下面的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 中对动作进行排队，以便前一个动作在下一个动作开始之前有时间停下来喘口气？

我在 click 函数和 animate 函数之后尝试了 .stop() 。click 函数之后的那个让情况变得更糟，而 animate 函数之后的那个把它全部破坏了......

提前谢谢了！

凯文

4

2 回答 2

5 
$('.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);   
});
于 2012-06-07T00:04:17.943 回答
0

这就是你所拥有的。

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

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

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

希望这可以帮助。

于 2013-07-08T07:06:00.310 回答