我有一个导航菜单:简介,大小,游戏,食物。当用户单击菜单项的超链接时,我想导航到该元素并设置动画。
例如,如果用户点击尺寸菜单项,那么我想制作动画&使用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>
答案 0 :(得分:3)
你会想要做这样的事情
$("nav ul li").click(function() {
var liText = $(this).text();
$('html, body').animate({
scrollTop: $("#" + liText ).offset().top
}, 1000);
});
答案 1 :(得分:2)
您可以使用$.animate(...)
执行平滑滚动,方法是将元素的偏移位置传递给scrollTop
。
<强> $动画:强> http://api.jquery.com/animate/
HTML CODE:
<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 CODE:
$('li a').on('click', function (e) {
var targetSec = $(this).text();
$('html, body').animate({
scrollTop: $('#' + targetSec).offset().top
}, 2000);
});
现场演示:
http://jsfiddle.net/dreamweiver/3Xm48/11/
快乐编码:)