jquery - 在菜单上单击 --> 动画并动态滚动到元素

Question

我有一个导航菜单:简介、大小、播放、食物。当用户单击菜单项的超链接时，我想导航到该元素并进行动画处理。

例如，如果用户单击Size菜单项，那么我想要制作动画并向下滚动到带有id="Size"的项目。

注意:这里的size菜单项href没有任何值，因为它是动态的。

index.html

<nav>
    <ul>
            <li><a href="#">Intro</a></li>
            <li><a href="#">Size</a></li>
            <li><a href="#">Play</a></li>
            <li><a href="#">Food</a></li>
    </ul>
    <div class="clear"></div>
</nav>

<aside id="Size" class="sidebar">
        <h3>Size</h3>
        <img src="Images/boxer2.jpg" />
        <p>Hegyét bár érti szeret.
        </p>
</aside>

Answer 1

你会想做这样的事情

$("nav ul li").click(function() {
    var liText = $(this).text();
    $('html, body').animate({
        scrollTop: $("#" + liText ).offset().top
    }, 1000);
});