最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

jQuery平滑滚动到页面指定位置

来源:http://www.erdangjiade.com/ 沐浴春风 2014-12-10 14:24浏览(1524)

今天我们要实现的效果是:当点击菜单项时,可以平滑地滚动到对应指定的位置。

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

jQuery平滑滚动到页面指定位置
分类:其它特效 > 动画效果 难易:初级
查看演示

加我微信,拉你进VIP群学习:

下载资源 下载积分: 30 积分

引入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);
    });
});

动画滚动效果是不是很简单啊,拓展效果:jQuery仿天猫左侧导航滚动效果

声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/22.html
评论0
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

1 2