javascript - 单击li上的左动画

我有一个菜单结构：

<ul id="creamenu" class="menuHolder">
                    <li><a id="news-1-menu" href="#/creative-events">news 1</a></li>
                    <li><a id="news-2-menu" href="#/creative-ajans">news 2</a></li>
                    <li><a id="news-3-menu" href="#/incentive-travel">news 3</a></li>
                </ul>
                <ul id="mainmenu" class="menuHolder">
                    <li><a id="about1-menu" href="#/hakkimizda">about 1</a></li>
                    <li><a id="about2-menu" href="#/haberler">about 2</a></li>
                    <li><a id="about3-menu" href="#/galeri">about 3</a></li>
                    <li><a id="about4-menu" href="#/referanslar">about 4</a></li>
                    <li><a id="about5-menu" href="#/iletisim">about 5</a></li>
</ul>

我在同一个HTML文件中有一个内容结构：

    <div id='news-1'>
        <!-- content -->
        <!-- content -->
</div>

    <div id='news-2'>
        <!-- content -->
        <!-- content -->
</div>

我想，当我点击一个项目，例如creamenu项目，转到div.e.g。
点击news-1 item，进入news-1 div.如下：http://codecanyon.net/item/fancyscroll/full_screen_preview/370241
纯jQuery有可能吗？

最佳答案

绝对有可能。试试这个：

$('#creamenu a').click(function(e) {
    var splitId = $(this).attr('id').split('-'),
        contentId = splitId[0] + '-' + splitId[1];

    e.preventDefault();

    $('html, body').animate({
      scrollTop: $('#' + contentId).offset().top
    }, 'slow');
});

使用这种特定的方法，您将需要确保在“creamenu”中链接的id前面加上相应内容的id（正如您现在所做的那样）。
只需将内容的id放在#creamenu链接的ref中，也会更加健壮。这样，如果用户没有JS活动，它仍然会跳转到内容，尽管没有动画。例如：

<li><a id="news-1-menu" href="#news-1">news 1</a></li>

那么，您的JS如下：

$('#creamenu a').click(function(e) {
    e.preventDefault();

    $('html, body').animate({
      scrollTop: $($(this).attr('href')).offset().top
    }, 'slow');
});