jQuery中ScrollTo用法示例


Posted in Javascript onSeptember 04, 2016

本文实例讲述了jQuery中ScrollTo用法。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<!--
scrollTo() 方法可把内容滚动到指定的坐标。
语法
scrollTo(xpos,ypos)
参数 描述
xpos  必需。要在窗口文档显示区左上角显示的文档的 x 坐标。
ypos  必需。要在窗口文档显示区左上角显示的文档的 y 坐标。
-->
<body onload="scrollTo(0,200);">
<div style="height:200px; background:#f60;">
  <p>导航</p>
</div>
<div style=" height:2000px; background:#06f;">
  <p>内容</p>
</div>
</body>
</html>

效果图如下:

jQuery中ScrollTo用法示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ScrollTo:平滑滚动到页面指定位置</title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="jquery.scrollTo.js"></script>
<style type="text/css">
.nav{width:500px; height:40px; margin:20px auto;}
.nav li{float:left; width:100px; height:24px; line-height:24px}
.box{height:500px}
.box h3{height:32px; line-height:32px; padding-left:20px; font-size:14px}
#pro,#ser,#job{ background-color:#f60;}
#news,#con{ background:#06f;}
</style>
</head>
<body>
<ul class="nav">
  <li><a href="javascript:void();" class="nav_pro">产品展示</a></li>
  <li><a href="javascript:void();" class="nav_news">新闻中心</a></li>
  <li><a href="javascript:void();" class="nav_ser">服务支持</a></li>
  <li><a href="javascript:void();" class="nav_con">联系我们</a></li>
  <li><a href="javascript:void();" class="nav_job">人才招聘</a></li>
</ul>
<div id="pro" class="box">
  <h3>产品展示</h3>
</div>
<div id="news" class="box">
  <h3>新闻中心</h3>
</div>
<div id="ser" class="box">
  <h3>服务支持</h3>
</div>
<div id="con" class="box">
  <h3>联系我们</h3>
</div>
<div id="job" class="box">
  <h3>人才招聘</h3>
</div>
<script type="text/javascript">
$(function(){
  $(".nav_pro").click(function(){
    $.scrollTo('#pro',500);
  });
  $(".nav_news").click(function(){
    $.scrollTo('#news',800);
  });
  $(".nav_ser").click(function(){
    $.scrollTo('#ser',1000);
  });
  $(".nav_con").click(function(){
    $.scrollTo('#con',1200);
  });
  $(".nav_job").click(function(){
    $.scrollTo('#job',1500);
  });
});
</script>
</body>
</html>

效果图如下:

jQuery中ScrollTo用法示例

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
用js重建星际争霸
Dec 22 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
jQuery获取标签文本内容和html内容的方法
Mar 27 Javascript
javascript实现英文首字母大写
Apr 23 Javascript
详解jQuery Mobile自定义标签
Jan 06 Javascript
js仿微信语音播放实现思路
Dec 12 Javascript
js制作可以延时消失的菜单
Jan 13 Javascript
fullCalendar中文API官方文档
Feb 07 Javascript
JavaScript制作简单的框选图表
May 15 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 Javascript
Vue中的v-for循环key属性注意事项小结
Aug 12 Javascript
node express使用HTML模板的方法示例
Aug 22 Javascript
jQuery与JS加载事件用法分析
Sep 04 #Javascript
jQuery轮播图效果精简版完整示例
Sep 04 #Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
Sep 04 #Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 #Javascript
JS简单实现仿百度控制台输出信息效果
Sep 04 #Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
Sep 04 #Javascript
JS简单测试循环运行时间的方法
Sep 04 #Javascript
You might like
Phpbean路由转发的php代码
2008/01/10 PHP
php中全局变量global的使用演示代码
2011/05/18 PHP
php单例模式的简单实现方法
2016/06/10 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
PHP标准库(PHP SPL)详解
2019/03/16 PHP
PHP的垃圾回收机制代码实例讲解
2021/02/27 PHP
快速保存网页中所有图片的方法
2006/06/23 Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
jQuery获取地址栏参数插件(模仿C#)
2010/10/26 Javascript
Jquery Ajax请求代码(2)
2011/01/07 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
Javascript基础教程之if条件语句
2015/01/18 Javascript
angularJS结合canvas画图例子
2015/02/09 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
vue小白入门教程
2018/04/02 Javascript
Node.js 深度调试方法解析
2020/07/28 Javascript
如何手写简易的 Vue Router
2020/10/10 Javascript
[02:10]三分钟回顾完美世界城市挑战赛
2019/01/24 DOTA
全面解读Python Web开发框架Django
2014/06/30 Python
常见的在Python中实现单例模式的三种方法
2015/04/08 Python
深入解答关于Python的11道基本面试题
2017/04/01 Python
浅谈Python中range和xrange的区别
2017/12/20 Python
python线程信号量semaphore使用解析
2019/11/30 Python
基于python及pytorch中乘法的使用详解
2019/12/27 Python
python输出第n个默尼森数的实现示例
2020/03/08 Python
python在一个范围内取随机数的简单实例
2020/08/16 Python
Python系统公网私网流量监控实现流程
2020/11/23 Python
使用python实现学生信息管理系统
2021/02/25 Python
Kangol帽子官网:坎戈尔袋鼠
2018/09/26 全球购物
材料化学应届生求职信
2013/10/09 职场文书
企业门卫岗位职责
2013/12/12 职场文书
公司董事长职责
2013/12/12 职场文书
战友聚会策划方案
2014/06/13 职场文书
《总之就是很可爱》新作短篇动画《总之就是很可爱~制服~》将于2022年夏天播出
2022/04/07 日漫
最新动漫情报:2022年7月新番定档超过30部, OVERLORD骨王第四季也在其中噢
2022/05/04 日漫