今天我们要实现的效果是:当点击菜单项时,可以平滑地滚动到对应指定的位置。
引入jQuery库和scrollTo.js插件。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.scrollTo.js"></script>
HTML
<ul class="nav clearfix">
<li><a href="#" class="nav_template">网站模板</a></li>
<li><a href="#" class="nav_jquery">网页特效</a></li>
<li><a href="#" class="nav_fonts">字体下载</a></li>
<li><a href="#" class="nav_code">网页源码</a></li>
<li><a href="#" class="nav_icon">图标下载</a></li>
</ul>
<div id="template" class="box">
<h3>网站模板</h3>
</div>
<div id="jquery" class="box">
<h3>网页特效</h3>
</div>
<div id="fonts" class="box">
<h3>字体下载</h3>
</div>
<div id="code" class="box">
<h3>网页源码</h3>
</div>
<div id="job" class="box" style="height:680px">
<h3>图标下载</h3>
</div>
jQuery
点击菜单项,滚动到菜单对应位置。
$(function() {
$(".nav_template").click(function() {
$.scrollTo('#template', 500);
});
$(".nav_jquery").click(function() {
$.scrollTo('#jquery', 800);
});
$(".nav_fonts").click(function() {
$.scrollTo('#fonts', 1000);
});
$(".nav_code").click(function() {
$.scrollTo('#code', 1200);
});
$(".nav_icon").click(function() {
$.scrollTo('#job', 1500);
});
});
动画滚动效果是不是很简单啊,拓展效果:<a href='http://www.sucaihuo.com/js/21.html' target='_blank'>jQuery仿天猫左侧导航滚动效果</a>。
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791