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

【问题标题】：On menu clicked --> animate & scroll to the element dynamically在菜单上单击->动画并动态滚动到元素
【发布时间】：2017-05-05 00:24:21
【问题描述】：

我有一个导航菜单：Intro、Size、Play、Food。当用户单击菜单项的超链接时，我想导航到该元素并进行动画处理。

例如，如果用户单击 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>

【问题讨论】：

标签： jquery jquery-animate

【解决方案1】：

你会想做这样的事情

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

【讨论】：

【解决方案2】：

您可以使用$.animate(...) 执行平滑滚动，方法是将元素的偏移位置传递给scrollTop。

$.animate:http://api.jquery.com/animate/

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="Intro" class="sidebar">
    <h3>Intro</h3>
    <img src="Images/boxer2.jpg" />
    <p>Hegyét bár érti szeret.</p>
</aside>
<aside id="Size" class="sidebar">
    <h3>Size</h3>
    <img src="Images/boxer2.jpg" />
    <p>Hegyét bár érti szeret.</p>
</aside>
<aside id="Play" class="sidebar">
    <h3>Play</h3>
    <img src="Images/boxer2.jpg" />
    <p>Hegyét bár érti szeret.</p>
</aside>
<aside id="Food" class="sidebar">
    <h3>Food</h3>
    <img src="Images/boxer2.jpg" />
    <p>Hegyét bár érti szeret.</p>
</aside>

JQUERY 代码：

$('li a').on('click', function (e) {
   var targetSec = $(this).text();
   $('html, body').animate({
      scrollTop: $('#' + targetSec).offset().top
   }, 2000);
});

现场演示：

http://jsfiddle.net/dreamweiver/3Xm48/11/

快乐编码:)

【讨论】：