0

ページの別の場所にジャンプする必要があるナビゲーションを使用して、継続的にスクロールする Web ページを作成しています。この例に従って、jQuery のスムーズなスクロール効果を実装しようとしています。HTML は正常に機能しています。リンクをクリックすると、ページ上の別の場所に移動しますが、jQuery のスクロール効果が機能していません。

html の重要な部分は次のとおりです。

<ul>
  <li><a href="#"><h1>work</h1></a></li>
  <ul class="nav">
    <li><a href="#section1"><p class="nav_p">project1</p></a></li>
    <li><a href="#section2"><p>project2</p></a></li>
    <li><a href="#section3"><p>project3</p></a></li>
    <li><a href="#section4"><p>project4</p></a></li>
    <li><a href="#section5"><p>project5</p></a></li>
    <li><a href="#section6"><p>project6</p></a></li>
    <li><a href="#section7"><p>project7</p></a></li>
    <li><a href="#section8"><p>project8</p></a></li>
  </ul>

<li><a href="#"><h1>about</h1></a></li>

<li><a href="#"><h1>contact</h1></a></li>
</ul>

そして、これはこれまでの JavaScript です: (上にリンクされているチュートリアル Web ページにあるものとまったく同じです)

$(function() {
    $('ul.nav a').bind('click',function(event){
        var $anchor = $(this);

        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500,'easeInOutExpo');
        event.preventDefault();
    });
});

なぜこれがうまくいかないのか、誰にもアイデアがありますか? ありがとうございました！

4

1 に答える 1

0

「easeInOutExpo」を削除しました。

$(function() {
    $('ul.nav a').bind('click',function(event){
        var $anchor = $(this);

        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500);
        event.preventDefault();
    });
});
于 2013-04-13T10:11:14.267 に答える