jquery - 使用 jQuery 实现平滑垂直滚动时遇到问题

Question

我正在构建一个连续滚动的网页，其导航应该跳转到页面上的不同位置。我正在尝试遵循这个示例，并实现 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：（它与顶部链接的教程网页上的内容完全相同）

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

有人对为什么这对我不起作用有任何想法吗？谢谢！

Answer 1

我刚刚删除了“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();
    });
});