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

Question

我有一个导航菜单：介绍，大小，播放，食品。当用户点击菜单项的超链接时，我想导航到该元素并设置动画。

例如，如果用户点击大小菜单项，然后我想与id="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

你可以通过元素的偏移位置scrollTop执行使用$.animate(...)平滑滚动。

$ .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/

编码快乐:)

Answer 2

你会想要做这样的事情

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