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>

私の問題は、[ホーム] リンクと [連絡先] リンクの間をジャンプするときに、スクロールが少し不安定になることです。確かに、これはスクロールが息を呑む前にボタンの 1 つをクリックした場合にのみ行われますが、この特定のクライアントは物事がどのように機能するかについて非常に具体的であり、私は彼らがそれを理解することを知っています (さらに私は決して故意にバグのあるものをリリースしたいと思っていますが、マイナーです)。

私の質問は、jQuery でアクションをキューに入れる簡単な方法はありますか?

クリック機能の後、およびアニメーション機能の後に .stop() を試しました。クリック機能の後のものは悪化し、アニメーション機能の後のものはすべて一緒に壊れました...

よろしくお願いします！

ケビン

4

2 に答える 2

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

また、おまけとして、メニュー項目ごとに1つの機能を持たせるのではなく、すべて1つの機能にするのはどうでしょうか。何かのようなもの：

$("#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 に答える