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 相关文章推荐
jQuery的实现原理的模拟代码 -1 核心部分
Aug 01 Javascript
js 数据类型转换总结笔记
Jan 17 Javascript
那些年,我还在学习jquery 学习笔记
Mar 05 Javascript
Javascript连接多个数组不用concat来解决
Mar 24 Javascript
JavaScript修改浏览器tab标题小技巧
Jan 06 Javascript
JavaScript学习笔记之JS对象
Jan 22 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
Dec 24 Javascript
bootstrap fileinput完整实例分享
Nov 08 Javascript
微信小程序 navbar实例详解
May 11 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
Nov 27 Javascript
JSON基本语法及与JavaScript的异同实例分析
Jan 04 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
Mar 08 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
风味层面去分析咖啡油脂
2021/03/03 咖啡文化
深入理解PHP之数组(遍历顺序)  Laruence原创
2012/06/13 PHP
PHP查询数据库中满足条件的记录条数(两种实现方法)
2013/01/29 PHP
php查找任何页面上的所有链接的方法
2013/12/03 PHP
PHP基于swoole多进程操作示例
2019/08/12 PHP
面向切面编程(AOP)的理解
2015/05/01 Javascript
jquery实现清新实用的网页菜单效果
2015/08/28 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
Vue.js每天必学之指令系统与自定义指令
2016/09/07 Javascript
dul无法加载bootstrap实现unload table/user恢复
2016/09/29 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
2017/03/28 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
React中使用collections时key的重要性详解
2017/08/07 Javascript
vue中v-model动态生成的实例详解
2017/10/27 Javascript
小程序实现留言板
2018/11/02 Javascript
vue实现弹幕功能
2019/10/25 Javascript
解决vue项目中出现Invalid Host header的问题
2020/11/17 Javascript
详解javascript脚本何时会被执行
2021/02/05 Javascript
[01:08:33]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python cookbook(字符串与文本)在字符串的开头或结尾处进行文本匹配操作
2018/04/20 Python
python监控文件并且发送告警邮件
2018/06/21 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
高中生毕业自我鉴定范文
2013/12/22 职场文书
会计专业毕业生求职信分享
2014/01/03 职场文书
初中学校对照检查材料
2014/08/19 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书
公司催款律师函
2015/05/27 职场文书
关于做家务的心得体会
2016/01/23 职场文书
python制作图形界面的2048游戏, 基于tkinter
2021/04/06 Python
Python 中的Sympy详细使用
2021/08/07 Python